zoukankan      html  css  js  c++  java
  • 倒计时

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <style type="text/css">
        .bj{
            background-color:grey;
        }
        #djs{
            text-align:center;
            color:#fff;
            font-size:20px; 
            margin-top:200px;
            text-shadow:1px 1px 1px rgba(0,0,0,0.4)
            }
        .js-bj {
            background:#505050;
            color:yellow;
            border-radius:5px;
            width:200px;
            font-family:Impact;
            font-size:120px;
            display:inline-block
            }
        #djs div{
            font-weight:bold;
            font-size:80px;
            margin-bottom:20px;
        }
      </style>
    </head>
    <body class='bj'>
        <div id="djs">
        </div> 
    </body> 
    
    <script type="text/javascript">
        var sdate = new Date();   //开始时间 
        var edate = new Date("2020/11/08");  //结束时间
        var diffdate = edate.getTime() - sdate.getTime();   //时间差的毫秒数
        var sysSecond = diffdate / 1000;
        console.log(sdate);
        console.log(edate);
        console.log(diffdate);
    
          
        var interValObj;
    
        function setRemainTime() {
            if (sysSecond > 0) {  
                var second = Math.floor(sysSecond % 60) >= 10 ? Math.floor(sysSecond % 60) : ('0' + Math.floor(sysSecond % 60));// 计算秒     
                var minite = Math.floor((sysSecond / 60) % 60) >= 10 ? Math.floor((sysSecond / 60) % 60) : ('0' + Math.floor((sysSecond / 60) % 60));//计算分
                var hour = Math.floor((sysSecond / 3600) % 24) >= 10 ? Math.floor((sysSecond / 3600) % 24) : ('0' + Math.floor((sysSecond / 3600) %24));//计算小时
                var day = Math.floor((sysSecond / 3600) / 24) >= 10 ? Math.floor((sysSecond / 3600) / 24) : ('0' + Math.floor((sysSecond / 3600) / 24));//计算天
                var year = Math.floor((sysSecond / 3600) / 24/365) >= 10 ? Math.floor((sysSecond / 3600) / 24/365) : ('0' + Math.floor((sysSecond / 3600) / 24/365));//计算年
    
                var timeHtml = "<div>距离软考还剩</div><br/><label class='js-bj'>" + day + "</label> 天 <label class='js-bj'>" + hour + "</label> 时 <label class='js-bj'>" + minite + "</label> 分 <label class='js-bj'>" + second + "</label> 秒"
                try {
                    $("#djs").html(timeHtml);
                    sysSecond--;
                }
                catch (e) { }
                interValObj = window.setTimeout("setRemainTime()", 1000);
            }
            else {
                $("#djs").html("<div style='color:yellow'>软考加油!!!</div><div style='color:yellow'>争取一次通过!!!</div>");
                window.clearTimeout(interValObj);
            }
        }
        setRemainTime();
    </script>
    </html>
  • 相关阅读:
    java jpg图片按质量保存
    Python 九九乘法表
    Linux 磁盘空间查看
    jsTree 隐藏父节点的复选框;只留最底一层的复选框
    padding-top实现列表图片自适应
    jsTree自定义contextmenu 的二种方式
    jstree插件对树操作增删改查的使用
    layui遇到的坑
    layui复选框全选,单选取消全选
    获取 Layui 表单 select 中的 option 的自定义属性
  • 原文地址:https://www.cnblogs.com/eric-qin/p/4519608.html
Copyright © 2011-2022 走看看