【石墨】极客编程小挑战#26:实现日期级联下拉选择框

详细内容请参见原文:http://www.gbtags.com/gb/share/5823.htm

本期挑战:

初始的html代码如下:

  1. <select name="year" id="year">
  2. <option value="0">--</option>
  3. <option value="1999">1999</option>
  4. <option value="2000">2000</option>
  5. <option value="2001">2001</option>
  6. </select>年
  7. <select name="month" id="month">
  8. <option value="0">--</option>
  9. <option value="1">1</option>
  10. <option value="2">2</option>
  11. <option value="3">3</option>
  12. <option value="4">4</option>
  13. <option value="5">5</option>
  14. <option value="6">6</option>
  15. <option value="7">7</option>
  16. <option value="8">8</option>
  17. <option value="9">9</option>
  18. <option value="10">10</option>
  19. <option value="11">11</option>
  20. <option value="12">12</option>
  21. </select>月
  22. <select name="date" id="date">
  23. <option value="0">--</option>
  24. </select>日

 效果图如下:

需求如下:

    “年”或“月”发生变化且为有效值时,“日”下拉选择框显示相应月份中的天数。
    “年”下拉选择框为初始状态(即值为0)时, “月”、“日”下拉选择框一定为初始状态(即值为0)。
    “月”下拉选择框为初始状态(即值为0)时, “日”下拉选择框一定为初始状态(即值为0)。
请写出以上需求的实现代码

提交方式:

  • 录制代码编写过程或最终代码:点击开始
  • 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址
  • 【强烈提醒】加入QQ群:157757552, 获奖用户及递交快递联系方式
  • 【强烈提醒】请在个人信息中添加QQ号,方便我们联系人获得快递地址

 赞助商[石墨]介绍:

石墨文档是一款简洁、轻便的文档协作工具,带给你在线文档的全新体验。它像一张无限延伸的纸,纸上跃动的墨迹,来自深山,来自田间,似水如烟,心无旁骛。它去繁从简,提炼出以往用户使用率最高的功能,通过赏心悦目的界面,行云流水的操作,一气呵成的书写,平滑流畅的交互,让人在不知不觉中回归最为质朴的心境。这就是石墨文档,你最安静的文字伴侣。

官方网站https://shimo.im | 微信服务号:石墨文档

礼品赞助:

本期礼品5套(Lamy钢笔+墨水)

我们将抽取五名大家最为赞同的答案进行奖品发放,欢迎参与!

晒晒往期获奖礼物

点击这里晒晒礼物

详细内容请参见原文:http://www.gbtags.com/gb/share/5823.htm

时间: 2024-10-14 07:32:05

【石墨】极客编程小挑战#26:实现日期级联下拉选择框的相关文章

极客编程小挑战#28:实现二级菜单的炫酷显示效果

那么本期挑战的内容是什么?容我卖个关子- 极客标签是一个学习前端知识和分享前端知识的平台.以往的挑战形式,更加偏向于学生完成老师布置的作业.而本期挑战,希望参赛者换个身份参与进来,将自己学习的知识讲授给他人.通过课程的形式,完成任务,并讲解详细,以帮助前端初学者更好地学习为目的,完成此次挑战.   本期挑战: 实现 单击按钮“分享更多”后,下级菜单呈现炫酷显示效果,下级菜单内容如下图(极客标签每篇文章后的分享方式),效果越炫越好- 本次挑战的作品在课程库中添加,以讲解详细.课程效果好为目的.课程

极客编程小挑战#27:生成动态大眼睛的效果

本期挑战: 生成如下动态效果:鼠标放在眼睛黄色区域上,眼珠随鼠标动:鼠标放在其他位置,眼珠无反应.(点击查看动态效果) 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]加入QQ群:157757552, 获奖用户及递交快递联系方式 [强烈提醒]请在个人信息中添加QQ号,方便我们联系人获得快递地址 原文链接:http://www.gbtags.com/gb/share/5908.htm   礼品赞助: 本期奖品共有5

极客编程小挑战#30:用CSS3实现各种钟表的显示效果

本期挑战: 利用css3制作钟表表盘效果.发挥想象.可以电子表或者是石英表,尽量做得炫酷.以下为两个示范,点击即可查看. 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]尽量通过添加课程,在本文评论中附上链接的方式提交答案,有特别奖励- [强烈提醒]提交了答案的人,请扫描下图中的二维码,加入微信群,方便工作人员进行信息统计 赞助商[时速云]介绍: 时速云TenxCloud是国内最早的容器云平台之一(Contain

极客编程小挑战#29:实现手机上常见的某一功能的效果显示

本期挑战: 实现手机上常见的某一功能的效果显示.可以是某个按钮的显示效果,页面跳转的显示效果,二级菜单的出现方式等.可以做已有的效果,也可以发挥你的想象,做出你期待的手机功能效果. 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]尽量通过添加课程,在本文评论中附上链接的方式提交答案,有特别奖励- [强烈提醒]提交了答案的人,请扫描下图中的二维码,加入微信群,方便工作人员进行信息统计 本期礼品: 感谢美团云提供10

微信小程序的按下抬起事件,下拉选择框的事件及点击确定的方法函数,获取时间的方法,省市区的方法。

抬起按下的事件: 抬起事件: bind:touchstart="nanOne"   把这条属性放到标签里就可以了 在JS中 nanOne: function () { this.setData({ nvimg: '../img/nvOne.png', }) }, 按下事件: bind:touchend="nanTwo" 把这条属性放到标签里就可以了 在JS中 nanTwo: function () { this.setData({ nvimg: '../img/nv

极客编程日历2018桌面壁纸(转载及完善)

转载声明 本文转载自简书文章[极客编程日历2018桌面壁纸],并进行了补充. 图灵社区出版了一本极客编程日历"Happy Hacking 2018" ,实体已经售罄,但是提供了PDF电子版下载.我们可以编写脚本,把日历和桌面壁纸结合在一起. 作者:Paralevi链接:https://www.jianshu.com/p/912ce01d4752來源:简书 在网上看了这篇文章后对自动合成壁纸蛮感兴趣的,但是把脚本粘过来执行时一直报错,最后查了不少信息才搞定,在此进行填坑记录. 1.环境说

极客编程必备的五大PHP开发应用

有了PHP应用可以帮助编码爱好者事半功倍,提升项目质量:有了这些最新的且灵活的PHP应用使创建编码项目更加简单.便捷.本文,我们收集了五大最新的PHP开发应用. PHP应用在网络上并不多见.最重要的是,很难找到有关这方面的资源.代码指南对于编程爱好者来说非常重要且是必备的,因为它能为你节省大量的时间,让你自由编码. PHP编码者需要掌握该领域的新技术,并且在项目中必须运用新的功能.有了PHP应用可以帮助编码爱好者事半功倍,提升项目质量:有了这些最新的且灵活的PHP应用使创建编码项目更加简单.便捷

微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

下拉更新.分享.阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新.分享.阅读标识. 下拉更新功能 下拉更新这个功能与我们在第一章中写的小 demo 所用方法一致:onReachBottom. 当用户滚动过程中触发了 上拉 这个动作时候,微信小程序会自动监听到并执行 onReachBottom 这个函数,所以我们只需要把这个监听事件写好就

【OneAPM】极客编程挑战#025:发挥想象生成漂亮炫酷的SVG动画效果

活动链接:http://www.gbtags.com/gb/share/5610.htm 本期挑战 提供如下的SVG图形,请使用任何技术生成基于如下SVG图形的动画效果,看看谁设计的动画效果最酷 ~~ <svg width="720px" height="486px"> <g id="layer1"> <path style="fill:#888888" d="m 434.02002,3