JS——倒数跳转页面

来源：互联网发布：淘宝店铺代运营协议书编辑：程序博客网时间：2024/05/17 07:02

最近在JavaScript视频，里面有很多实用的例子！昨天敲了一个“倒数跳转页面”的例子，觉得挺有用的，有的时候在网上答题交卷时，提交完会有倒计时多少秒之后关闭，下面就简单讲讲实现方法。

一、代码如下：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>倒数跳转页面</title>    <style type ="text/css" >        /*P标签样式*/        p {            text-align :center; /*居中*/            font-size:50px;     /*字体大小*/            color:red;          /*字体颜色*/        }    </style>    <script type="text/javascript" >        onload = function () {            var span = document.getElementById("second");            // setInterval就是开启一个计时器，里面传入一个方法和一个时间            // 表示每隔这个时间间隔调用一次这个方法            var intervalId = setInterval(function () {                // var num = span.innerHTML - 1;    //等价下面三行                //innerHTML：获得或设置一个标签下的内容（内容可以是HTML格式的）：                var numstr = span.innerHTML;                var num = parseInt(numstr);                num--;                span.innerHTML = num;                if (num <= 0) {                    // 停下计时器                    clearInterval(intervalId);                    //跳转到百度首页                    location.href = "https://www.baidu.com/";                }            }, 1000);        };    </script></head><body>     <p>请等待<span id="second">10</span>秒后跳转</p></body></html>

二、效果图：

倒计时：

跳转百度首页：

阅读全文

0 0