js333 > 计算机互联网 > 使用javascript实现页面定时跳转总结篇,Javascrip

原标题:使用javascript实现页面定时跳转总结篇,Javascrip

浏览次数:179 时间:2019-12-21

javascript使用定时函数实现跳转到某个页面

定时跳转到某个页面,比如跳转到一个页面处理完任务,然后又回到原来的页面,这个用javascript的定时函数很容易实现

有时我们跳转到一个页面处理完任务,然后又回到原来的页面,这个在很多的下载网站可以看到,这样做也是为了留住用户。 

 

这个用javascript的定时函数很容易实现。 

 

window.setTimeout( code,time) // code 执行的代码 time 设置的时间 

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 

<html xmlns="; 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>javascript自动跳转</title> 

<script type="text/javascript"> 

function redrect() 

window.location = "1.html"; 

window.setTimeout(redrect,3000);// 跳转函数 

</script> 

</head> 

<body > 

<h4 style="color:#F00">这是跳转页面....</h4> 

</body> 

</html> 

 

定时跳转到某个页面,比如跳转到一个页面处理完任务,然后又回到原来的页面,这个用javascr...

有时我们跳转到一个页面处理完任务,然后又回到原来的页面,这个在很多的下载网站可以看到,这样做也是为了留住用户。

下面对使用JavaScript实现页面定时跳转(也称倒计时跳转)做一下总结,各种定时跳转代码记录如下:

  在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,当然还可以使用页面的metea实现了,下面我介绍两个实例。

这个用javascript的定时函数很容易实现。

(1)使用 setTimeout 函数实现定时跳转(如下代码要写在body区域内)

例1

window.setTimeout( code,time) // code 执行的代码 time 设置的时间

复制代码 代码如下:

倒计时刷新页面

复制代码 代码如下:

<script type="text/javascript">
// 3秒钟之后跳转到指定的页面
setTimeout(window.location.href = "", 3);
</script>

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript自动跳转</title>
<script type="text/javascript">
function redrect()
{
window.location = "1.html";
}
window.setTimeout(redrect,3000);// 跳转函数
</script>
</head>
<body >
<h4 style="color:#F00">这是跳转页面....</h4>
</body>
</html>

(2)html代码实现,在页面的head区域块内加上如下代码

<script type="text/javascript" language="JavaScript">

这个用javasc...

复制代码 代码如下:

var startTime = new Date();
var endTime=startTime.getTime()+10*60*1000;
var g_blinkswitch = 0;
var g_blinktitle = document.title;
function getRemainTime(){

<!-- 5秒钟后跳转到指定的页面 -->
<meta http-equiv="refresh" content="5;url=" />

var nowTime = new Date();
var nMS =endTime - nowTime.getTime();
var nM=Math.floor(nMS/(1000*60)) % 60;
var nS=Math.floor(nMS/1000) % 60;
if(nM==0&&nS==0&&nMS<1000) //当倒计时结束
{
window.focus();
setInterval("blinkNewMsg()", 1000);
window.location.reload();
}
if(nS < 10) nS = "0" + nS;

(3)稍微复杂点,多见于登陆之后的定时跳转

if(nMS >= 0){
document.getElementById("remainTime").innerHTML= nM + "分" + nS + "秒";

复制代码 代码如下:

setTimeout("getRemainTime()",1000);
}

<html xmlns=";
<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 = ""; // 设定跳转的链接地址
}
document.getElementById('show').innerHTML = "" + t + "秒后跳转到php程序员教程网"; // 显示倒计时
t--; // 计数器递减
}
</script>
<span id="show"></span>
</body>
</html>

}

(1)使用 setTimeout 函数实现定时跳转...

function blinkNewMsg()
{
document.title = g_blinkswitch % 2==0 ? "【 】 - " + g_blinktitle : "【新消息】 - " +
g_blinktitle;
g_blinkswitch++;
}

window.onload=getRemainTime;

</script>

<strong id="remainTime">10分00秒</strong>

 

例2

倒计时跳转页面

代码如下

<title>JS倒计时网页自动跳转代码</title> 
<script language="JavaScript" type="text/javascript">
function delayURL(url) {
var delay = document.getElementById("time").innerHTML;
if(delay > 0) {
delay--;
document.getElementById("time").innerHTML = delay;
} else {
window.top.location.href = url;
}
setTimeout("delayURL('" + url + "')", 1000);
}
</script>
<span id="time" style="background: #00BFFF">3</span>秒钟后自动跳转,如果不跳转,请点击下面的链接<a href=";
<script type="text/javascript">
delayURL("");
</script>

 

防刷新的倒计时代码

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 
<html xmlns="; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> www.45it.com</title> 
</head> 
<body> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
var maxtime; 
if(window.name==''){ 
maxtime = 1*60; 
}else{ 
maxtime = window.name; 

function CountDown(){ 
if(maxtime>=0){ 
minutes = Math.floor(maxtime/60); 
seconds = Math.floor(maxtime%60); 
msg = "距离考试结束还有"+minutes+"分"+seconds+"秒"; 
金沙js333娱乐场 ,document.all["timer"].innerHTML = msg; 
if(maxtime == 5*60) alert('注意,还有5分钟!'); 
--maxtime; 
window.name = maxtime; 

else{ 
clearInterval(timer); 
alert("考试时间到,结束!"); 


timer = setInterval("CountDown()",1000); 
//-->
</SCRIPT> 
<div id="timer" style="color:red"></div> 
</body> 
</html>

例1 倒计时刷新页面...

本文由js333发布于计算机互联网,转载请注明出处:使用javascript实现页面定时跳转总结篇,Javascrip

关键词:

上一篇:关闭浏览器时提示onbeforeunload事件,用js判断页面

下一篇:没有了