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>
猜你喜欢
