Javascript倒计时跳转页面实例

在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.45it.com">我的百度</a>
<script type="text/javascript">
delayURL("http://www.45it.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.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+"秒";
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>

分类:Javascript教程 时间:2012-01-03 人气:5
本文关键词:
分享到:

相关文章

  • JavaScript实现页面实时显示当前时间的简单实例 2012-01-02

    这篇文章介绍了页面实时显示当前时间的简单实例,有需要的朋友可以参考需要 复制代码 代码如下: <html> <head> <title>JavaScript实现页面实时显示当前时间</title> </head> <body> <script language="javascript"> function showtime() { var today,hour,second,minute,year,month,d

  • JavaScript修改css样式style动态改变元素样式 2012-01-04

    修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的 一、局部改变样式 分为改变直接样式,改变className和改变cssText三种。需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.

  • javascript中的编程语言如何编码规范 2012-01-07

      对于熟悉 C/C++ 或 Java 语言的工程师来说,javascript 显得灵活,简单易懂,对代码的格式的要求也相对松散。很容易学习,并运用到自己的代码中。也正因为这样,javascript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 javascript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注。   本文浅谈 javascript

  • vs2008的JavaScript 语法提示(Intellisense)功能 2012-01-09

    一直想这javascript能提供注释功能就好了,vs2008里提供了智能感知(Intellisense)功能,想用这个功能的童鞋可以在html里开发javascript,最后再保存在js文件中。下面我们就介绍下javascript的智能感知(Intellisense)功能 JavaScript已经发展成为进行Web客户端编程的标准语言。它有大量的语言资源,但是对开发的支持并不完备。大多数使用JavaScript的开发人员更倾向于用原来的方法进行调试,但是现在有很多工具来减轻测试和调试的负担。

  • 为IE浏览器的javascript提速 2012-01-10

    随着现在网页设计越来越多的应用javascript技术,而且浏览器的Javascript引擎运行速度也成为各大浏览器比拼性能的重要指标,各家浏览器厂商皆宣称他们的浏览器速度更快,希望搅动现存的竞争态势。IE8浏览器的Javascript运行速度虽然相对于IE7以及IE6有着很大的提升,但相对于Webkit引擎的浏览器还是有一定的差距,在去年的ZDNET Javascript测试上Chrome浏览器表现突出,一举击败Firefox、Safari和微软的IE浏览器。不过因为IE浏览器相对庞大的使用人

  • 关于javascript中对浮点加,减,乘,除的精度分析 2012-01-11

    大学专业是计算机童鞋或多或小的知道 计算机是由二进制存储和处理数字的,不能精确到处理浮点数,且javascript也没有这样的方法 所以在浏览器计算的时候也会有误差,比如说 我想用 3.3 / 1.1 那么按道理来说 答案是 3 ,对不对 但是我们可以打印出来看下 结果令我们很惊讶 是 2.9999999999999996 .现在我们想 为了避免产生精度差异,需要计算的数字升级(乘以10的n次幂)成计算机能够精确识别的整数,等计算完毕再降级(除以10的n次幂). 这样处理下 就可以实现正常的结果

  • JavaScript Event学习第三章:早期的事件处理程序 2012-01-14

    被第二代浏览器所支持。 这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发 明的。因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览 器就得跟着Netscape走,所以这里没有兼容性的问题。所以这种模式在任何支持 JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件。 注册事件处理程序 在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如: 1 <A HREF="somewhere

  • Javascript 遮罩层和加载效果代码 2012-01-14

    这篇文章介绍了Javascript 遮罩层和加载效果代码,有需要的朋友可以参考一下 复制代码 代码如下: //loading function showLoad(tipInfo) { var iWidth = 120; //弹出窗口的宽度; var iHeight = 0; //弹出窗口的高度; var scrolltop = 0; var scrollleft = 0; var cheight = 0; var cwidth = 0; var eTip = document.createEle

  • JavaScript脚本编写规范 2012-01-25

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散。很容易学习,并运用到自己的代码中。也正因为这样,JavaScript 的编码规范也往往被轻视,开发过程中修修补补,最终也就演变成为后续维护人员的恶梦。软件存在的长期价值直接与编码的质量成比例。编码规范能帮助我们降低编程中不必要的麻烦。而 JavaScript 代码是直接发送给客户浏览器的,直接与客户见面,编码的质量更应该受到关注。 本文浅谈 JavaScript 编程中关

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.050 (s). 10 q(s)