js 倒计时跳转

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

新老客户大回馈,云服务器低至5折

(冰雪林中著此身,不同桃李混芳尘)

 

  用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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:javascript: 数组详细操作方法及解析合集(9个改变8个不变12个

下一篇:react入门