zoukankan      html  css  js  c++  java
  • JS做倒计时的例题

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>倒计时</title>
            <script>
                function countTime(){     //函数countTime(时间差)
                    var n = new Date();     //声明一个现在的时间    
                    var now = n.getTime();     //声明一个变量,获取一下上面定义的时间
                    
                    var e = "2019/09/01 10:30:00";     //声明一个截止时间
                    var endDate = new Date(e);     //声明一个变量,定义截止时间
                    var end = endDate.getTime();     //声明变量,获取上面的截止时间
    
                    var leftTime = end - now;     //用截止时间减去现在的时间
                    
                    var d, h, m, s;     //声明四个变量
                    if (leftTime>=0){     //if条件语句
                        d = Math.floor(leftTime/1000/60/60/24);     //Math.floor返回小于或等于一个给定数字的最大整数。     //毫秒除以时间单位算出总天数
                        h = Math.floor(leftTime/1000/60/60%24);     //毫秒除以时间单位算出总小时数
                        m = Math.floor(leftTime/1000/60%60);     //毫秒除以时间单位算出总分钟数
                        s = Math.floor(leftTime/1000%60);     //毫秒除以时间单位算出总秒数
                    }
                    
                    document.getElementById("_d").innerHTML = d + "天";     //span标签 id=_d获取元素,上面的计算结果连接单位"天"
                    document.getElementById("_h").innerHTML = h + "时";     //span标签 id=_h获取元素,上面的计算结果连接单位"时"
                    document.getElementById("_m").innerHTML = m + "分";     //span标签 id=_m获取元素,上面的计算结果连接单位"分"
                    document.getElementById("_s").innerHTML = s + "秒";     //span标签 id=_s获取元素,上面的计算结果连接单位"秒"
                    setTimeout(countTime,1000);     //添加定时事件:countTime函数和执行之前以及事件间隔的毫秒数
                }
                
            </script>
        </head>
        <body onload="countTime()">     <!--body页面,事件会在页面或图像加载完成后立即发生,引用countTime函数-->
            <h1>活动截止日期:9月1日上午十点半</h1>
            <h2>距离活动时间结束还有:</h2>
            <div>
                <span id="_d">00</span>
                <span id="_h">00</span>
                <span id="_m">00</span>
                <span id="_s">00</span>
            </div>
            <!--<p id="demo"></p>-->
        </body>
    </html>
  • 相关阅读:
    CAD开发中遇到的疑难问题整理与开发技巧
    使用jquery插件jquery.qrcode生成二维码
    小程序 跳转页面
    【已解决】Intel NUC10 拔插USB口/登录QQ/蓝牙连接等导致显示器黑屏
    element-ui表格el-table回显时默认全选数据
    设计模式
    react lib-flexible postcss-px2rem集成
    odoo 接口请求原理
    odoo 更改返回的json 格式
    git 合并两个仓库
  • 原文地址:https://www.cnblogs.com/wzy123/p/11392530.html
Copyright © 2011-2022 走看看