JavaScript如何实现倒计时跳转-职坐标

JavaScript如何实现倒计时跳转

沉沙 2018-12-28 来源：阅读 939 评论 0

摘要：本篇教程探讨了JavaScript如何实现倒计时跳转，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇教程探讨了JavaScript如何实现倒计时跳转，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

JavaScript如何实现倒计时跳转

用js实现简单的倒计时结束页面跳转效果，主要用到setInterval()和clearInterval()方法，页面跳转使用window.location.href = " "。倒计时结束后在当前页面进行跳转。
效果图：
代码：
<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>js倒计时跳转</title>
    </head>
    <style>
        body{
            height: 100%;
            width: 100%;
        }
        #content{
            position:absolute;
            top:-200px;
            bottom:0;
            left:0;
            right:0;
            margin:auto;
            padding: 20px;
            border:1px solid #bcbcbc;
            width: 500px;
            height: 100px;
            text-indent : 40px;
            font-size: 18px;
            line-height: 40px;
            text-align:center;
        }
        #time{
            margin-top: 20px;
            text-align:center;
        }
        #timer{
            width: 220px;
            padding: 10px;
            font-size: 20px;
            background: #06428B;
            color: white;
            border: 0px;
            border-radius: 3px;
        }
        #timer:hover{
            cursor: pointer;
        }
    </style>
    <body>
        <div id="content">
            <div>这是一个倒计时跳转的例子</div>
            <div id="time" >
                <input id="timer" type="button" value="开始跳转10秒" onclick="btnClick();"/>
            </div>
        </div>
    </body>
    <script type="text/javascript" >
        var time = 9; //时间秒，自己调整!
        function CountDown() {
                 if (time >= 0) {
                     msg = "开始跳转" + time + "秒";
                     document.all["timer"].value = msg;
                     --time;
                 } else{
                     clearInterval(timer);
                     window.location.href = "职坐标weijuanran/";//在原来的窗体中直接跳转用
                 }
        }
        timer = setInterval("CountDown()", 1000);
        function btnClick() {
            window.location.href = "职坐标weijuanran/";//在原来的窗体中直接跳转用
            //window.open("职坐标weijuanran/");//打开新的窗口页
        }
    </script>
</html>