js 倒计时 跳转

1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>setTimeout</title>
    </head>
    <body>
            <div id=‘div1‘>  </div>  

    </body>
    </html>  

    <script type="text/javascript">
    //设定倒数秒数
    var t = 10;
    //显示倒数秒数
    function showTime(){
        t -= 1;
        document.getElementById(‘div1‘).innerHTML= t;
        if(t==0){
            location.href=‘http://www.baidu.com‘;
        }
        //每秒执行一次,showTime()
        setTimeout("showTime()",1000);
    }  

    //执行showTime()
    showTime();
    </script>  

2.

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

example :

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js定时跳转页面的方法</title>
    </head>
    <body>
    <script type="text/javascript">
    var t=10;//设定跳转的时间
    setInterval("refer()",1000); //启动1秒定时
    function refer(){
        if(t==0){
            location="www.baidu.com"; //#设定跳转的链接地址
        }
        document.getElementById(‘show‘).innerHTML=""+t+"秒后跳转"; // 显示倒计时
        t--; // 计数器递减
    }
    </script>
    <span id="show"></span>
    </body>
    </html> 

遇到的问题:

当将上述js 的方法 放在$(function(){......})中时, 浏览器会报 methodXX() is not defined;

应当将function(){}的定义放在 <script></script>中

时间: 2024-11-09 01:13:46

js 倒计时 跳转的相关文章

JS倒计时跳转页面

这里给大家提供一个好用的JS写的倒计时页面,就像一些网站上点提交后出现的倒计时页面类似. 页面代码简单,直接拷贝就能运行,页面可以自己美化下. 1 <!--这里定义倒计时开始数值--> 2 3 <span id="totalSecond">5</span> 4 5 <!--定义js变量及方法--> 6 7 <script language="javascript" type="text/javascri

js 倒计时跳转页面

<script type="text/javascript">var i = 5; var intervalid; intervalid = setInterval("fun()", 1000); function fun() { if (i == 0) { window.location.href = "<%=basePath%>home"; clearInterval(intervalid); } document.g

JS倒计时网页自动跳转代码

<title>JS倒计时网页自动跳转代码</title> <script language="JavaScript" type="text/javascript"> function delayURL(url) { var delay = document.getElementById("time").innerHTML; if(delay > 0) { delay--; document.getElem

js写的5秒钟倒计时跳转

使用js实现几秒以后倒计时跳转,这个在某些特殊情况下还是比较实用的,下面为大家介绍下具体的实现步骤,感兴趣的朋友不要错过 代码如下: <html> <head> <title>出错啦~~~</title> <link href="css/login1.css" mce_href="css/login1.css" rel="stylesheet" type="text/css"

js倒计时+页面跳转

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 5秒倒计时跳转 var num_s = 5; var cal_timer = setInterval(showTime, 5000); fu

[javascript]各种页面定时跳转(倒计时跳转)代码总结

(1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 1 <script type="text/javascript"> 2 //3秒钟之后跳转到指定的页面 3 setTimeout(window.location.href='http://www.baidu.com',3); 4 </script> (2)html代码实现,在页面的head区域块内加上如下代码 1 <!--5秒钟后跳转到指定的页面--> 2 <met

记录各种页面定时跳转方法(倒计时跳转总结)

下面对实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下: (1)使用setTimeout函数实现定时跳转(如下代码要写在body区域内) 代码如下: <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.balijieji.com',3); </script> (2)html代码实现,在页面的head区域块内加上

各种页面定时跳转(倒计时跳转)代码总结

一.使用setTimeout函数实现定时跳转(如下代码要写在body区域内) <script type="text/javascript"> //3秒钟之后跳转到指定的页面 setTimeout(window.location.href='http://www.baidu.com',3); </script> 或者: <script language="JavaScript" type="text/javascript&quo

js页面跳转

js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/javascript">           window.location.href="target.aspx";     </script> 2.window.navigate方式跳转   <script language="javascript&q