用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. flex 布局实现固定头部和底部，中间滚动布局

    关键词:display: flex,flex: 1,  overflow-y: scroll; 实现:head 和footer 固定,中间body多了滚动,少了撑满: head和footer宽度根据内 ...

  2. DataPipeline丨金融行业如何统一管理单个任务下所有API的同步情况

    目前,依靠"手工人力"的电子表格数据治理模式逐渐被"自动智能"的专业工具取代.数据管理员.业务分析师开始采用"平台工具"来梳理主数据.元数据 ...

  3. 在ArcMap中发布FeatureLayer（要素图层）

    FeatureLayer(要素图层)是ArcGIS Server发布的一种很重要的地图服务,发布后使用提供的url地址就可以在代码中调用并在地图上显示.编辑这个FeatureLayer.在HTML页面 ...

  4. ContentProvider和ContentResolver的使用

    ContentProvider ContentProvider 在android中的作用是对外共享数据,也就是说你可以通过ContentProvider把应用中的数据共享给其他应用访问,其他应用可以通 ...

  5. 对比 Git 与 SVN，这篇讲的很易懂

    ---恢复内容开始--- 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯工蜂发表于云+社区专栏 导语 本文从 Git 与 SVN 的对比入手,介绍如何通过 Git-SVN 开始 ...

  6. 设置Mac 终端走代理

    1.打开终端执行:export http_proxy=socks5://127.0.0.1:1080 这个只能在当前终端执行一次退出后就需要重新设置 如果需要开机自动设置,把上面的代码加到~/.bas ...

  7. 如何快速掌握DDT数据驱动测试？

    1.前言 (网盗概念^-^)相同的测试脚本使用不同的测试数据来执行,测试数据和测试行为完全分离, 这样的测试脚本设计模式称为数据驱动.(网盗结束)当我们测试某个网站的登录功能时,我们往往会使用不同的用 ...

  8. java配置环境及安装

    1.安装JDK开发环境 首先登陆https://www.oracle.com 第一步:Products ---- Java ---- Download java(JDK) for Developers ...

  9. 【Git之旅】1.Git常用命令

    1.创建初始化版本库 git init 2.将文件添加到版本库中 git add index.html (添加到暂存区) git add . 命令让Git把当前目录及目录中的文件都添加到版本库里 gi ...

  10. [Abp vNext 源码分析] - 2. 模块系统的变化

    一.简要说明 本篇文章主要分析 Abp vNext 当中的模块系统,从类型构造层面上来看,Abp vNext 当中不再只是单纯的通过 AbpModuleManager 来管理其他的模块,它现在则是 I ...