zoukankan      html  css  js  c++  java
  • 使用JavaScript实现一个倒数计时程序

    使用JavaScript在网页中实现一个计算当年还剩多少时间的倒数计时程序,网页上能够实时动态显示“XX年还剩XX天XX时XX分XX秒”:

    程序代码如下:

    <meta charset="utf-8"/>
    <html>
    <body onload="counter()">
    <div id="nowtime"></div>
    <div id="yeartime"></div>
    <div id="monthtime"></div>
    <div id="daytime"></div>
    <script type="text/javascript">
    
    function  counter(){
    //    求年剩余时间
       var date = new Date();
        document.getElementById("nowtime").innerHTML="当前时间是:"+date;
       var year = date.getFullYear();//getFullYear():从 Date 对象以四位数字返回年份。
    
        //创建Date对象的方法:
        //var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); //按照这个顺序哦!注意月份是0~11 !!
       var date1 = new Date(year,12,31,23,59,59);
    
        //转换成秒
       var time1 = (date1 - date)/1000;
    
        //floor(x)     对 x 进行下舍入。
       var day = Math.floor(time1/(24*60*60));
       var hour = Math.floor(time1%(24*60*60)/(60*60));
        var minute = Math.floor(time1%(24*60*60)%(60*60)/60);
        var second = Math.floor(time1%(24*60*60)%(60*60)%60);
    
        document.getElementById("yeartime").innerHTML= year + "年还剩" +day +""+hour+"小时"+minute+""+second+"";
        t=setTimeout(function(){counter();},1000);
    
    
    //求月剩余时间
        var month = date.getMonth()+1;//getMonth():从 Date 对象返回月份 (0 ~ 11)。所以当前月要加上1 !
        var date2 = new Date(year,month,30,23,59,59);
        //转换成秒
        var time2 = (date2 - date)/1000;
    
        //floor(x)     对 x 进行下舍入。
        var day2 = Math.floor(time2/(24*60*60)/2);  //此处天数的计算有所偏差......
        var hour2 = Math.floor(time2%(24*60*60)/(60*60));
        var minute2 = Math.floor(time2%(24*60*60)%(60*60)/60);
        var second2 = Math.floor(time2%(24*60*60)%(60*60)%60);
    
        document.getElementById("monthtime").innerHTML= year+""+month + "月还剩" +day2 +""+hour2+"小时"+minute2+""+second2+"";
    
    //求当天剩余时间
        var todaydate=date.getDate();  //获取今天是几号
        var todayweek=date.getDay();  //获取今天是星期几,返回值是 0(周日) 到 6(周六) 之间的一个整数。
        document.getElementById("daytime").innerHTML="【今天】:(" +year+""+month + ""+todaydate+"日 星期"+todayweek +")   还剩"+hour2+"小时"+minute2+""+second2+"";
    
    }
     //window.setInterval("counter()",1000);
    </script>
    </body>
    </html>

    结果截图如下:

    完整代码参见github :

    Github 地址:

     https://github.com/shenxiaolinZERO/Resources/tree/master/Resources/TimeCounter

  • 相关阅读:
    sublime设置node.js编译
    Markdown基本语法规范
    vue2.0学习笔记之组件
    使用let声明变量的理解
    vue2.0学习笔记之路由(二)路由嵌套+动画
    vue2.0学习笔记之路由(二)路由嵌套
    设置webstorm支持ES6语法
    vue2.0环境搭建
    bower包管理工具
    【转】jquery cookie操作
  • 原文地址:https://www.cnblogs.com/shenxiaolin/p/5564897.html
Copyright © 2011-2022 走看看