js 倒计时跳转

2018-12-24 09:09:50来源：博客园阅读 ()

（冰雪林中著此身，不同桃李混芳尘）

　　用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 = "https://www.cnblogs.com/weijuanran/";//在原来的窗体中直接跳转用
                 }
        }
        timer = setInterval("CountDown()", 1000);

        function btnClick() {
            window.location.href = "https://www.cnblogs.com/weijuanran/";//在原来的窗体中直接跳转用
            //window.open("https://www.cnblogs.com/weijuanran/");//打开新的窗口页
        }
    </script>

</html>