用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. iftop命令使用范例

    iftop 介绍 iftop是一款实时流量监控工具,监控TCP/IP连接等,缺点就是无报表功能.必须以root身份才能运行. 实例 默认是监控第一块网卡的流量 iftop 监控eth1 iftop - ...

  2. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  3. 微信小程序后端开发（Java语言）笔记

    前言: 因为是第一次真正接触后端开发,从编码到部署服务器到上线,所以做个笔记,也供和我一样的开发小白一些参考. 一.前期工作:开发环境与工具: 1. 编程语言:Java    #笔者还没学PHP,只想 ...

  4. Windows下建立FTP服务器站点

    环境 操作系统版本:Win7旗舰版64位系统 1.安装FTP组件 打开或关闭Windows功能,打开过程可能会比较慢,大概3.4分钟: 安装FTP组件.勾选Internet信息服务下的FTP服务器.F ...

  5. 解决 VS2019 打开 edmx 文件时没有 Diagram 视图的 Bug

    问题描述 安装 VS 2019 (版本:16.0.2)后,发现更新选项中已经没有 “Entity Framework 6.X 工具” 了,打开 .edmx 文件时,呈现的视图是 xml 视图. 解决方 ...

  6. 快速构建SPA框架SalutJS--项目工程目录 二

    目录结构 上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目.下面逐个介绍每个目录的存放的文件和作用. constructio ...

  7. linux shell 备注（一）

    1.特殊字符 #!/bin/bash # $表示当前PID ID echo $$ # $n是shell脚本的参数,当0是第一个参数,即文件名 # $#是shell当前脚本的参数个数 # 例如:sh03 ...

  8. 从壹开始微服务 [ DDD ] 之二 ║ DDD入门 & 项目结构粗搭建

    前言 哈喽大家好,今天是周二,我们的DDD系列文章今天正式开始讲解,我这两天一直在学习,也一直在思考如何才能把这一个系列给合理的传递给大家,并且达到学习的目的,还没有特别好的路线,只是一个大概的模糊的 ...

  9. Python面向对象 组合（选课系统示例）

    # Author : Kelvin # Date : 2019/1/15 20:44 """ 学校与老师关联 课程与老师和学校关联 """ ...

  10. 『练手』004 Laura.SqlForever如何扩展 导航栏 工具栏 右键菜单 插件

    004 Laura.SqlForever如何扩展 导航栏 工具栏 右键菜单 插件 导航栏 插件扩展 比如下图的    窗口 > 关闭所有文档    这个导航栏: 在 任何程序集,任何命名空间,任 ...