• JavaScript实现页面显示倒计时功能


    下面是用JS中的日期函数和定时器完成的一个倒计时的例子,效果如图:

    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <title>倒计时</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        </head>
        <body>
            <input type="button" onclick="daojishi();" value="开始倒计时"/>
            <div id="daojishi"></div>
        </body>
        <script type="text/JavaScript">
    
            function daojishi(){
                //获取当前时间
                var nowTime = new Date();
                //获取活动结束时间,这里注意,月份是0-11
                var EndTime = new Date(2018,05,11,15,24,0);
                //比较活动结束日期和当前时间
                var chaTime = EndTime.getTime() - nowTime.getTime();
    
                var nMS = 0;
                if (chaTime > 0){
                    nMS = chaTime;
                }if (chaTime == 0){
                    alert("活动时间到");
                    return;
                }else if(chaTime < 0){
                    alert("活动已过期");
                    return;
                }
    
                //floor() 方法执行的是向下取整计算,它返回的是小于或等于函数参数,并且与之最接近的整数。
                var nD = Math.floor(nMS / (1000 * 60 * 60) / 24);//
                var nH = Math.floor(nMS / (1000 * 60 * 60)) % 24;//
                var nM = Math.floor(nMS / (1000 * 60)) % 60;//
                var nS = Math.floor(nMS / 1000) % 60;//
    
                if (nH < 10) {
                    nH = '0' + nH;
                }
                if (nM < 10) {
                    nM = '0' + nM;
                }
                if (nS < 10) {
                    nS = '0' + nS;
                }
    
                document.getElementById("daojishi").innerHTML = "<span>"+nD+"</span>天<span>"+nH+"</span>时<span>"+nM+"</span>分<span>"+nS+"</span>秒";
                
                //定时器
                setTimeout(function() {
                    daojishi();
                }, 1000);
            }
        </script>
    </html>
  • 相关阅读:
    MVC设计模式
    二十三种设计模式
    描绘质量属性的六个常见属性场景。
    《架构漫谈》读后感
    软件架构师的工作过程
    《架构之美》阅读笔记06
    《架构之美》阅读笔记05
    《架构之法》阅读笔记04
    《架构之美》阅读笔记03
    《构架之美》阅读笔记02
  • 原文地址:https://www.cnblogs.com/wbxk/p/6806695.html
Copyright © 2020-2023  润新知