用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. 浅谈CSS3 box-sizing 属性 有趣的盒模型

    盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒模型的宽高只是 ...

  2. Android之PhotoView使用

    文章大纲 一.什么是PhotoView二.代码实战三.项目源码下载 一.什么是PhotoView   一款 ImageView 展示框架,支持缩放,响应手势,位于图片排行榜的第五位,PhotoView ...

  3. Windows Server 2016-Netdom Join加域并指定OU (一)

    前边我们提到了客户端如何通过图形化.netdom .Powershell方式加域,这里我们简单补充下生产环境中如何通过有权限的用户账号加域并指定对应的OU,以防止域策略下发对部分生产服务器权限等内容进 ...

  4. 多线程总结之旅（1）：线程VS进程

    一.进程:进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,也就是应用程序的执行实例,进程是系统进行资源分配和调度的一个独立单位.每个进程是由私有的虚拟地址空间.代码.数据和其它各种系统资 ...

  5. 接触新的项目，构建时候报错:Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in

    详细信息如下: Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in http:// ...

  6. python的进程与线程（二）

    线程 之前了解了操作系统的发展史,也知道了进程和线程的概念,归纳一下就是:         进程:本质上就是一段程序的运行过程(抽象的概念)         线程:最小的执行单元,是进程的实体     ...

  7. qml demo分析(maskedmousearea-异形窗口)

    一.效果展示 如本文的标题所示,这篇文章分析的demo是一个异形窗口,主要展示鼠标在和异形区域交互的使用,效果如图1所示,当鼠标移动到白云或者月亮上时,相应的物体会高亮,当鼠标按下时,物体会有一个放大 ...

  8. Sql Server 的参数化查询

    为什么要使用参数化查询呢?参数化查询写起来看起来都麻烦,还不如用拼接sql语句来的方便快捷.当然,拼接sql语句执行查询虽然看起来方便简洁,其实不然.远没有参数化查询来的安全和快捷. 今天刚好了解了一 ...

  9. ToastCustom【自定义显示风格的Toast】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 基于系统Toast的自定义显示风格的Toast. 效果图 代码分析 ToastCustom类基于系统Toast,不是继承Toast, ...

  10. GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...