美文网首页web入门学习
js小运用之时钟和倒计时

js小运用之时钟和倒计时

作者: 我本无常 | 来源:发表于2018-09-17 20:41 被阅读2次

    时钟

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
        <style type="text/css">
            
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oBox = document.getElementById('box');
    
                function timeGo(){
                    var now = new Date();
                    // alert(now);//弹出美式时间:Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
                    var year = now.getFullYear();//2018年
                    var month = now.getMonth() + 1;//6月弹出5//范围0-11
                    var date = now.getDate();//20号
                    var week = now.getDay();//3//星期几,西半球时间,范围0-6,星期日为一周的第一天,为0
    
                    var hour = now.getHours();
                    var minute = now.getMinutes();
                    var second = now.getSeconds();
    
                    // alert(hour + ":" + minute + ":" + second);//15:33:9
    
                    oBox.innerHTML = '当前时间是:' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
                }
    
                timeGo();
                setInterval(timeGo, 1000);
            }
    
            //此函数将星期的数字转为汉字表示
            function toWeek(num){
                switch(num){
                    case 0:
                        return '星期天'; 
                        break;
                    case 1:
                        return '星期一'; 
                        break;
                    case 2:
                        return '星期二'; 
                        break;
                    case 3:
                        return '星期三'; 
                        break;
                    case 4:
                        return '星期四'; 
                        break;
                    case 5:
                        return '星期五'; 
                        break;
                    case 6:
                        return '星期六'; 
                        break;
                }
            }
    
            //此函数将不足两位的数字前面补0
            function toDouble(num){
                if(num < 10){
                    return '0' + num;
                }else{
                    return num;
                }
            }
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
    </html>
    

    倒计时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
        <script type="text/javascript">
            window.onload = function(){
                //活动第二天要将页面下线,直接跳转到其它页面,不会走后面的代码了
                // window.location.href = "http://www.baidu.com";
    
                var oDiv = document.getElementById('div1');
    
                function timeLeft(){
                    //实际开发中此时间从服务器获取,避免客户端调整时间
                    var now = new Date();
                    var future = new Date(2018,5,20,16,30,20);
    
                    // alert(future - now);//弹出与当前时间相差的毫秒数:12469935436
                    var milli = parseInt((future - now)/1000);
    
                    //活动当天页面下线,避免倒计时到点后继续计负时
                    // if(milli <= 0){
                    //  //页面跳转,不执行下面的代码了
                    //  window.location.href = "http://www.baidu.com";
                    // }
    
                    var day = parseInt(milli / 86400);
                    var hour = parseInt(milli % 86400 / 3600);
                    var minute = parseInt(((milli % 86400) % 3600) / 60);
                    var second = milli % 60;
    
                    oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有' + day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
                }
                
                timeLeft();
                setInterval(timeLeft, 1000);
            }
    
            function toDouble(num){
                if(num < 10){
                    return '0' + num;
                }else{
                    return num;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:js小运用之时钟和倒计时

        本文链接:https://www.haomeiwen.com/subject/lxpdnftx.html