码迷,mamicode.com
首页 > 其他好文 > 详细

关于时间控制和制定时间日期

时间:2017-07-30 15:49:55      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:效果   clear   element   var   ++   lin   etl   max   onchange   

关于时间控制,动画效果

<meta charset="UTF-8">
        <title></title>
        <style>
            #dh {
                width: 50px;
                height: 50px;
                background-color: royalblue;
            }
        </style>
    </head>

    <body>
        <div id="dh"></div>
    </body>
<script>
    var dh = document.getElementById("dh");

    //alert(dh.offsetLeft);
    function move() {
        dh.style.marginLeft = dh.offsetLeft + 1 + px;
    }

    var x = window.setInterval(move(), 20);
    var y = window.setInterval(move(), 500);

    function clear() {
        window.clearInterval(x);
    }
    
    window.setTimeout("clear()",2500);
</script>

显示年月日代码

    <body>
        <select id="year"></select>
        <select id="month"></select>
        <select id="day"></select>

        
    </body>
<script>
    var time = new Date();
    var year_now = time.getFullYear();

    var slt_year = document.getElementById(year);
    var slt_month = document.getElementById(month);
    var slt_day = document.getElementById(day);

    for(var i = 1990; i <= year_now; i++) {
        var new_opt = document.createElement(option);
        new_opt.innerText = i;
        slt_year.appendChild(new_opt);
    }

    for(var i = 1; i <= 12; i++) {
        var new_opt2 = document.createElement(option);
        new_opt2.innerText = i;
        slt_month.appendChild(new_opt2);
    }
    

    slt_year.onchange = function() {
        change();
    }

    slt_month.onchange = function() {
        change();
    }

    function change() {
        var year = slt_year.selectedOptions[0].innerText;
        var month = slt_month.selectedOptions[0].innerText;

        if(month == 4 || month == 6 || month == 9 || month == 11) {
            add_day(30); //增加天数
        } else if(month == 2) {
            if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                add_day(29)
            } else {
                add_day(28)
            }
        } else {
            add_day(31);
        }
    }

    function add_day(i_max) {
        slt_day.innerText = ‘‘;
        for(var i = 1; i <= i_max; i++) {
            var new_opt3 = document.createElement(option);
            new_opt3.innerText = i;
            slt_day.appendChild(new_opt3);
        }
    }
</script>

这个要考虑平年闰年还有每个月三十天或者三十一天。

显示年月日表单,循环的方法。

<body>
        <select id=‘year‘ size=‘1‘ style="width: 80px;"></select>
        <select id=‘month‘ size=‘1‘ style="width: 80px;"></select>
        <select id=‘day‘ size=‘1‘ style="width: 80px;"></select>
    </body>
</html>
<script>
    var year = document.getElementById(year);
    var month = document.getElementById(month);
    var day = document.getElementById(day);
    for(i=1990;i<2018;i++){
        var opt=document.createElement(option);
        opt.innerText=i;
        year.appendChild(opt);
        
    }
    for(j=1;j<13;j++){
        var opt2=document.createElement(option);
        opt2.innerText=j;
        month.appendChild(opt2);
    }
    for(k=1;k<32;k++){
        var opt3=document.createElement(option);
        opt3.innerText=k;
        day.appendChild(opt3);
    }
    
    month.onchange=function(){
        day.options[28].style.display=inline
        day.options[29].style.display=inline
        day.options[30].style.display=inline
        y=year.selectedOptions[0].value;
        m=month.selectedOptions[0].value;
        if(y%4==0&&y%100!==0||y%400==0){
            if(m==2){
                day.options[29].style.display=none
                day.options[30].style.display=none
            }else{
                if(m==4|m==6|m==9|m==11){
                    day.options[30].style.display=none
                }
            }
        }else{
            if(m==2){
                day.options[28].style.display=none
                day.options[29].style.display=none
                day.options[30].style.display=none
            }else{
                if(m==4|m==6|m==9|m==12){
                    day.options[30].style.display=none
                }
            }
        }
    }
</script>

这个办法比较笨,一步步下来还是很清晰的。考虑到所有会出现的情况。

 

关于时间控制和制定时间日期

标签:效果   clear   element   var   ++   lin   etl   max   onchange   

原文地址:http://www.cnblogs.com/sunzhenkun/p/7259115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!