用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. 学习笔记—CSS基础

    概念 CSS 指层叠样式表(Cascading Style Sheets), 是一种标记语言,属于浏览器解释型语言,可以直接由浏览器执行,不需要编译. HTML只负责网页的内容,标签尽量只负责语意不负 ...

  2. Mapbox使用详解

    一.简介: Mapbox致力于打造全球最漂亮的个性化地图.   在一次偶然的地图相关资料搜索过程中发现了一个很神奇又很漂亮的地图,这个地图支持高度自定义各种地图元素,比如,道路,水系,绿地,建筑物,背 ...

  3. Alpha阶段Scrum Meeting合集（江山代有才人秃队）

    Day URL 第一天 第1篇Scrum冲刺博客 第二天 第2篇Scrum冲刺博客 第三天 第3篇Scrum冲刺博客 第四天 第4篇Scrum冲刺博客 第五天 第5篇Scrum冲刺博客 第六天 第6篇 ...

  4. spring 【二】学习之spring EL

    spring EL-spring 表达式语言,支持在xml和注解的形式,类似于JSP的el表达式的形式. 其主要使用@Value注解的结构形式 其主要功能 [1].注入普通字符串 [2].注入操作系统 ...

  5. building tool

    Build Tool的含义是什么? building tool中文名称叫构建工具,BuildTools.jar是我们构建Bukkit,CraftBukkit,Spigot和Spigot-API的解决方 ...

  6. git客户端保存用户名密码

    [转载]原文地址:https://blog.csdn.net/qq_26819733/article/details/52735123/ 看图说话,直接在Tortoisegit的设置中,点git-&g ...

  7. .NET Core微服务之基于Ocelot+IdentityServer实现统一验证与授权

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 一.案例结构总览 这里,假设我们有两个客户端(一个Web网站,一个移动App),他们要使用系统,需要通过API网关(这里API网关始终作为 ...

  8. 接口自动化：HttpClient + TestNG + Java(二) - 第一个接口测试：get请求

    在上一篇中,我们搭建好了HttpClient + TestNG + Java的自动化接口测试环境,这一篇我们就赶紧开始编写我们的第一个接口测试用例. 本篇会对问题解决的思路进行更详尽的阐述. 2.1 ...

  9. Windows10下安装Docker的步骤

    一.启用Hyper-V 打开控制面板 - 程序和功能 - 启用或关闭Windows功能,勾选Hyper-V,然后点击确定即可,如图: 点击确定后,启用完毕会提示重启系统,我们可以稍后再重启. 二.安装 ...

  10. C# 30分钟完成百度人脸识别——进阶篇（文末附源码）

    距离上次入门篇时隔两个月才出这进阶篇,小编惭愧,对不住关注我的卡哇伊的小伙伴们,为此小编用这篇博来谢罪. 前面的准备工作我就不说了,注册百度账号api,创建web网站项目,引入动态链接库引入. 不了解 ...