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>
  • 相关阅读:
    爬虫工具包
    用于模型选择的AIC与BIC
    4.数据结构---堆
    海量数据查询
    机器学习---算法汇总目录
    RNN/LSTM/GRU/seq2seq公式推导
    Dropout正则化和其他方法减少神经网络中的过拟合
    查看动态链接库中函数参数类型
    ANSI、ASCII、GB2312、GBK
    Unicode(UTF-8, UTF-16)令人混淆的概念
  • 原文地址:https://www.cnblogs.com/wbxk/p/6806695.html
Copyright © 2011-2022 走看看