灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:7789回复:0

Javascript倒计时跳转页面实例

楼主#
更多 发布于:2013-09-13 13:08
在js中实现页面定时跳转我们要使用setinterval或setTimeOut函数,当然还可以使用页面的metea实现了,下面我介绍两个实例。
 
例1
 
倒计时刷新页面
 
代码如下
<script type="text/javascript" language="JavaScript">
  
var startTime = new Date();
 var endTime=startTime.getTime()+10*60*1000;
 var g_blinkswitch = 0;
 var g_blinktitle = document.title;
 function getRemainTime(){
  
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;
  
if(nMS >= 0){
 document.getElementById("remainTime").innerHTML= nM + "分" + nS + "秒";
  
setTimeout("getRemainTime()",1000);
 }
  
}
  
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="http://www.atcpu.com">我的百度</a> 
<script type="text/javascript">
 delayURL("http://www.atcpu.com");
 </script>

防刷新的倒计时代码
 
代码如下
 
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.atcpu.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+"秒"; 
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>

喜欢0 评分0
游客

返回顶部