zoukankan      html  css  js  c++  java
  • JS实现下拉框时间选择

    使用js实现的一个简单的下拉框时间选择如图:












    代码如下:

    <html>

    <head>
    <script type="text/javascript">
    window.onload=function(){
    var selects = document.getElementsByTagName("select");//通过标签名获取select对象
    var date = new Date();
    var nowYear = date.getFullYear();//获取当前的年
    for(var i=nowYear;i<=nowYear-100;i--){
    var optionYear = document.createElement("option");
    optionYear.innerHTML=i;
    optionYear.value=i;
    selects[0].appendChild(optionYear);
    }
    for(var i=1;i<=12;i++){
    var optionMonth = document.createElement("option");
    optionMonth.innerHTML=i;
    optionMonth.value=i;
    selects[1].appendChild(optionMonth);
    }
    getDays(selects[1].value,selects[0].value,selects);
    }
    // 获取某年某月存在多少天
    function getDaysInMonth(month,year){
    var days;
    if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) {
    days=31;
    }else if (month==4 || month==6 || month==9 || month==11){
    days=30;
    }else{
    if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)) {     // 判断是否为润二月
    days=29; 
    }else { 
    days=28; 
    }
    }
    return days;
    }
    function setDays(){
    var selects = document.getElementsByTagName("select");
    var year = selects[0].options[selects[0].selectedIndex].value;
    var month = selects[1].options[selects[1].selectedIndex].value;
    getDays(month,year,selects);
    }
    function getDays(month,year,selects){
    var days = getDaysInMonth(month,year);
    selects[2].options.length = 0;
    for(var i=1;i<=days;i++){
    var optionDay = document.createElement("option");
    optionDay.innerHTML=i;
    optionDay.value=i;
    selects[2].appendChild(optionDay);
    }
    }
    </script>
    </head>
    <body>
    <div class="date1">

    <select onchange="setDays()">
    </select>
    <span>年</span>
    <select onchange="setDays()">
    </select>
    <span>月</span>
    <select>
    </select>
    <span>日</span>
    </div>
    </body>
    </html>

  • 相关阅读:
    大伙看看这个界面风格咋样...
    unity 如何打开本地文件夹,并选中文件
    IoC模式(依赖、依赖倒置、依赖注入、控制反转)
    DOTween-Ease缓动函数
    unity 改变鼠标样式的两种方法
    Unity编辑器中分割线拖拽的实现
    根据日期计算星期几 -- 基姆拉尔森计算公式
    指派问题与匈牙利解法
    Unity游戏推送技术
    Unity图集打包
  • 原文地址:https://www.cnblogs.com/wangzl1163/p/6341211.html
Copyright © 2011-2022 走看看