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

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

js 倒计时跳转的更多相关文章

  1. js 倒计时 跳转

    1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code ...

  2. js倒计时跳转链接

    (function(){ var loadUrl = 'http://www.cnblogs.com/naokr/',//跳转链接 loadTime = 3000,//跳转时间 reTime = 10 ...

  3. js倒计时跳转jquery插件版

    <script type="text/javascript" src="js/jquery1.91.min.js"></script> ...

  4. js倒计时跳转页面

    var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...

  5. js倒计时跳转页面实现

  6. js 倒计时跳转页面

    <script type="text/javascript">var i = 5; var intervalid; intervalid = setInterval(& ...

  7. js写的5秒钟倒计时跳转

    使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过  代码如下: <html>  <head>  < ...

  8. JS倒计时网页自动跳转代码

    <title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/ ...

  9. JS——页面倒计时跳转

    Js几秒后倒计时跳转 <html><head><title>出错啦~~~</title><link href="css/login1.c ...

随机推荐

  1. Observer观察者模式与OCP开放-封闭原则

    目录 场景引入 在联网坦克项目中使用观察者模式 总结 在学习Observer观察者模式时发现它符合敏捷开发中的OCP开放-封闭原则, 本文通过一个场景从差的设计开始, 逐步向Observer模式迈进, ...

  2. Snapde一个全新的CSV超大文件编辑软件

    今天介绍如果数据量超过104万行Excel无法打开了,用什么软件可以打开呢?Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它在C++语言开发的Snapman多人协作电子 ...

  3. oppo8.0系统怎么无需Root激活Xposed框架的经验

    在较多部门的引流,或业务操作中,基本都需要使用安卓的神一般的xposed框架,近期我们部门购来了一批新的oppo8.0系统,基本都都是基于7.0以上版本,基本都不能够刷入root的su权限,虽说一部分 ...

  4. 【转载】Verilog中的parameter

    1. 概述 在Verilog中我们常常会遇到要将一个常量(算法中的某个参数)赋给很多个变量的情况,如: x = 10;y = 10;z = 10;如果此时10要改为9,就需要在代码中修改3个地方,非常 ...

  5. “Validation failed for one or more entities”异常的解决办法

    日志中出现Entity Framework修改数据库时的错误: Validation failed for one or more entities. See 'EntityValidationErr ...

  6. 解决flutter的image_cropper组件引入报错问题

    在使用flutter的图片裁剪组件image_cropper,github:https://github.com/hnvn/flutter_image_cropper 根据它的要求,安卓需要在文件[A ...

  7. 【社群话题分享】你的网站 HTTPS 了吗？

    每周三下午的话题活动是又拍云技术社群的优良传统-大家一起来看看这周都聊了些啥吧! 推荐阅读: 当 “HTTP” 先生遇上“S”小姐 了解 HTTPS,读这篇文章就够了 HTTPS 是什么? HTTPS ...

  8. 从零开始学习PYTHON3讲义（十一）计算器升级啦

    (内容需要,本讲中再次使用了大量在线公式,如果因为转帖网站不支持公式无法显示的情况,欢迎访问原始博客.) <从零开始PYTHON3>第十一讲 第二讲的时候,我们通过Python的交互模式来 ...

  9. Redis 概念以及底层数据结构

    Redis 简介 REmote DIctionary Server(Redis) 是一个由SalvatoreSanfilippo写的key-value存储系统. Redis是一个开源的使用ANSI C ...

  10. 内核mailbox

    只罗列增加取走消息: static int add_to_rbuf(struct mbox_chan *chan, void *mssg) { int idx; unsigned long flags ...