Posted in Javascript onSeptember 11, 2013
例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="https://3water.com">我的百度</a> <script type="text/javascript"> delayURL("https://3water.com"); </script>
例3 防刷新的倒计时代码
<!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> 3water.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>
例4:结合图片数字的现实更漂亮
代码中有图片,直接提供一个演示地址,注意里面的图片地址
http://demo.3water.com/js/2013/daojishi/index.htm
Javascript倒计时页面跳转实例小结
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@