zoukankan      html  css  js  c++  java
  • js倒计时

    完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>时间倒计时</title>
        <style>
            div{
                margin: 100px auto;
                font: bold 60px '微软雅黑';
                text-align: center;
            }
        </style>
    </head>
    <body>
    <script>
        function t( n ) {
            if( n > 9 ){
                return n;
            }else{
                return "0"+n;
            }
        }
        // year, month, day 设定的年月日
        // divId  显示的容器Id
        // getTime( ) 返回距 1970 年 1 月 1 日之间的毫秒数
        function timer ( year, month, day, divId ) {
            var nowDate = new Date();   //现在的时间
            var endDate = new Date( year, month-1, day );    //设定的时间
            var cerDate = endDate.getTime() - nowDate.getTime();  //设定的时间和现在相差多少毫秒
            var cerTime = parseInt(cerDate / 1000);  //设定的时间和现在相差多少秒
            var dd = Math.floor( cerTime /(60*60*24));  //设定的时间和现在相差多少天
            var hour = Math.floor( (cerTime - dd *60*60*24)/3600);  //设定的时间和现在相差多少小时
            var minute = Math.floor( (cerTime - dd *60*60*24 - hour * 60*60)/60);  //设定的时间和现在相差多少分
            var second = Math.floor( (cerTime - dd *60*60*24 - hour * 60*60 - minute *60) );
            var ms  = Math.floor(parseInt(cerDate / 10)%60);  // 自定义的毫秒(读秒)
    
            var oDiv = document.getElementById( divId );
            oDiv.innerHTML = "<p>距离"+ t( year )+ ""+ t(month)+""+ t(day)+"日<br>还有:</p><p>"+ t(dd)+""+t(hour)
                +""+t(minute)+""+t(second)+""+ t(ms)+ "</p>";
    
        }
        window.setInterval(function(){
            timer( 2017, 11, 6, "txt")
        },10)
    </script>
    <div id="txt"></div>
    </body>
    </html>

    效果图: 

  • 相关阅读:
    iOS系列译文:自定义Collection View布局
    iOS系列译文:整洁的表视图代码
    各种类型的电影排行榜-movie路线
    学习正则
    sublime text 配置golang开发环境
    百度地图 Javascript API 笔记
    Sublime Text 3 若干问题解决办法
    无法修改系统Host的解决办法
    守望先锋overwatch美服外服设置方法
    Steam游戏黑屏与游戏直接安装方法
  • 原文地址:https://www.cnblogs.com/wangyihong/p/7010041.html
Copyright © 2011-2022 走看看