zoukankan      html  css  js  c++  java
  • 【HTML+CSS+JavaScript】实时倒计时功能

    需求:实现距离2019年过年倒计时展示

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>倒计时</title>
        <style type="text/css">
            #box {
                font-size: 60px;
                margin-top: 200px;
                text-align: center;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    
    
        <script type="text/javascript">
            //定义结束时间
            var endDate = new Date('09/10/2018 00:00:00');
            //定义当前时间
            var currDate = new Date();
    
            //倒计时的秒数
            var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000);
    
            runTime();
    
            //定时
            var timer = setInterval(runTime,1000);
    
            function runTime(){
    
                //计算包含的天数
                var d = Math.floor(seconds / (3600 * 24));
                //计算剩余的秒数
                var s = seconds - d * 3600 * 24;
                
    
                //计算包含的小时数
                var h = Math.floor(s / 3600);
                //计算剩余的秒数
                s -= h * 3600;
    
    
                //计算包含的分钟数
                var m = Math.floor(s / 60);
                //计算剩余的秒数
                s -= m * 60;
    
                //给个位数补0
                d = d < 10 ? '0'+d : d;
                h = h < 10 ? '0'+h : h;
                m = m < 10 ? '0'+m : m;
                s = s < 10 ? '0'+s : s;
    
    
                //拼接字符串
                var timeHtml = `❤距离我们认识一周年❤${'<br>'}还有${d}天${h}小时${m}分${s}秒`;
    
    
                //判断倒计时结束
                if (seconds <= 0) {
                    clearInterval(runTime);
                    timeHtml = '❤❤❤❤❤';
                }
    
    
                document.querySelector('#box').innerHTML = timeHtml;
    
                seconds--;
    
            }
    
        </script>
    </body>
    </html>
  • 相关阅读:
    socket.io带中文时客户端无法响应
    JQ树插件 — zTree笔记
    cecium 笔记
    express处理跨域问题,中间件 CORS
    一些接口
    express 3.5 Err: request aborted
    ovirt kvm嵌套虚拟化
    kvm实现快速增量盘模式的克隆脚本
    kvm命令
    kvm 中 Guest Is already in use 处理办法
  • 原文地址:https://www.cnblogs.com/neymargoal/p/9470242.html
Copyright © 2011-2022 走看看