js 倒计时跳转

最新推荐文章于 2023-09-29 21:36:44 发布

weixin_34341229

最新推荐文章于 2023-09-29 21:36:44 发布

阅读量527

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weijuanran/p/js_redirection.html

版权

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

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

转载于:https://www.cnblogs.com/weijuanran/p/js_redirection.html

weixin_34341229

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 倒计时跳转

　　用js实现简单的倒计时结束页面跳转效果，主要用到setInterval()和clearInterval()方法，页面跳转使用window.location.href = " "。倒计时结束后在当前页面进行跳转。效果图：代码：<!DOCTYPE html><html > <head> <meta cha...
复制链接

扫一扫