zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    PHP中如何防止跨域调用接口
    301、404、200、304、500HTTP状态
    多表联合查询
    put方式提交上传图片
    获取样式属性getComputed,currentStyle
    AjaxPro异步加载服务器的时间
    在 ASP.NET 中执行 URL 重写
    ASP.NET 的前世今生 之 .NET Framework
    asp.net 读写 XML 转载自 yiki'space
    可爱的人人
  • 原文地址:https://www.cnblogs.com/wbxk/p/6806695.html
Copyright © 2011-2022 走看看