js页面倒计时

Posted <-----

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js页面倒计时相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>活动倒计时</title>
    <style>
        *
        {
            margin:0;
            padding:0;
            list-style:none;
        }
        body
        {
            font-size:18px;
            text-align:center;
        }
        .time
        {
            height:30px;
            padding:200px;
        }
        a{
            text-decoration: none;
            color: black;
            display: block;
            font-family: "宋体";
            font-style: oblique;
        }
    </style>
</head>
<body>
<div class="time">
    <span id="view"></span>
    <a id="jump" href="http://www.baidu.com">立即报名</a>
</div>
<script src="js/jquery-1.7.2.js"></script>
<script>
    $(document).ready(function(){
        //  stopFlag为定时任务对象
        var stopFlag = setInterval(function(){getDistanceTime(‘2018-06-10 21:34:30‘,‘view‘)},0);
        function getDistanceTime(time,view){
            var endTime= new Date(Date.parse(time.replace(/-/g, "/")));/*replace将时间字符串中所有的‘-‘替换成‘/‘,parse将时间格式的字符串转换成毫秒*/
            var nowTime = new Date();
            var distance =endTime.getTime() - nowTime.getTime();/*getTime把一个date对象转换成毫秒*/

            var day = 0;
            var hour = 0;
            var minute = 0;
            var second = 0;
            if(distance >=0){
                day = Math.floor(distance/1000/60/60/24);
                hour = Math.floor(distance/1000/60/60%24);
                minute = Math.floor(distance/1000/60%60);
                second = Math.floor(distance/1000%60);
            }else{
                stop(); // 终止定时任务
            }
            $("#view").html(day + "天" +  hour + "时" + minute + "分" + second + "秒")
        }

        function stop() {
            // 终止指定的定时任务
            window.clearInterval(stopFlag);
            //$("#jump").attr("disabled");  // 去除属性
            $("#jump").attr("href","#").click(function () {
                alert("活动已经终止，请留意官网最新动态！");
            });
        }
    });
</script>
</body>
</html>

　　

以上是关于js页面倒计时的主要内容，如果未能解决你的问题，请参考以下文章

JS倒计时跳转页面

js在页面显示2023年春节倒计时效果，时间结束显示新年快乐？

这段倒计时js，打开页面时就自动倒计时。怎么改成单击后开始计时？

python使用上下文对代码片段进行计时，非装饰器

静态页面：原生JS模拟京东秒杀专场倒计时

求每天距下班时间倒计时JS代码