`
Kevin12
  • 浏览: 235359 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript 定时器 倒计时

阅读更多
链接地址:http://kevin12.iteye.com/blog/1946035

最近做项目,项目里面用到了定时器,用来刷新页面,javascript代码如下:
<script type="text/javascript">
var start = 5;
var step = -1;
function count()
{
	document.getElementById("div1").innerHTML = "页面将在"+start+"秒后返回登录页面...";
	start += step;
	if(start <= 0){
		start = 5;
		//window.location="index.jsp";//返回index.jsp页面
		//TODO:在这里可以做相关的操作
	}
setTimeout("count()",1000); 
}
window.onload = count;
</script>

body中的代码如下:
<body>
   <div id="div1"></div>
</body>

既然上面的例子可以用倒计时,但是完全可以用于自动刷新页面,就是当倒计时结束后进行相关的操作。要注意的是,如果你访问该页面时候url后面带有参数,那么在该页面中你要房租存放参数的隐藏域,在进入页面时候将该参数赋值到隐藏域中,倒计时结束时候获取隐藏域中的参数,加到url中。下面是项目中一个简单页面部分代码:
	<script type="text/javascript">
	//30秒刷新流程进度
		var start = 30;
		var step = -1;
		var mainId = "";//流程主表中流程id
		var pid = "";//流程id
		function counts()
		{
			start += step;
			if(start <= 0){
				if(mainId==""||pid==""){
					mainId = $("#mainId").val();
					pid = $("#pid").val();
				}
				start = 30;
				window.location="viewProgress.jsp?random="+Math.random()+"&paramStr="+mainId+"&pid="+pid+"&state=";
			}
		setTimeout("counts()",1000); 
		}
		window.onload = counts;
	</script>
<body>
	<input type="hidden" id="mainId"/>
	<input type="hidden" id="pid"/>
	<!--下面的省略-->

给隐藏域赋值的方法(部分代码):
//显示流程图
var isShowGraph = false;
var mainId = "";
var pid = "";
function showGraph(mxEditor){
	var path = decodeURIComponent(location.href);//转码
	var index = path.indexOf('paramStr=');
	var index2=path.indexOf('&pid=');
	var index3=path.indexOf('&state=');
	if(index != -1){
		mainId = path.substring(index+9,index2);
		pid = path.substring(index2+5,index3);
		$("#mainId").val(mainId);
		$("#pid").val(pid);
	$.ajax({
		type:'POST',
		dataType:'xml',
		url:'../loadWorkflowXml.action',
		data:{'mainId':mainId},
		//下面的代码省略


链接地址:http://kevin12.iteye.com/blog/1946035

简单应用可参考:http://kevin12.iteye.com/blog/1930366
0
3
分享到:
评论

相关推荐

    jquery.flipcountdown翻页定时器倒计时插件

    《jQuery.flipcountdown:翻页定时器倒计时插件详解》 在Web开发中,时间显示和倒计时功能常常被用于各种场景,比如活动预告、产品上线倒计时等。jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来满足...

    JavaScript使用定时器制作倒计时

    JavaScript使用定时器制作倒计时

    Javascript定时器 一 单线程

    定时器在JavaScript中的应用广泛,如动画效果、轮询服务器、实现延时操作、创建倒计时等。了解它们的工作原理和注意事项,能帮助我们编写出更健壮、高效的代码。 总结,JavaScript定时器在单线程环境下运行,它们...

    javascript 实现网页 倒计时 代码

    当倒计时结束时,会清除定时器并显示倒计时结束的消息。 在`index.html`文件中,你需要有一个与`countdown`函数匹配的HTML结构,例如: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;JavaScript倒计时 ...

    javascript 倒计时 实例

    JavaScript倒计时是一种常见的时间显示方式,常用于网站上的活动预告、考试倒计时或重要事件提醒等。在这个实例中,我们结合了JavaScript、CSS和jQuery来创建一个动态且具有视觉效果的倒计时计时器。以下是相关知识...

    JavaScript定时器范例2则

    2. `2.htm`则可能展示了`setInterval`的用法,比如创建一个实时更新的倒计时计器或者周期性地从服务器拉取数据。 学习和理解JavaScript定时器是非常关键的,它们在网页动态效果、动画制作、轮询服务等方面都有广泛...

    Javascript的倒计时显示特效

    当倒计时结束时,会自动清除定时器,并更新文本为“倒计时结束”。 这段代码已经兼容了IE6、7和Firefox,因为其核心逻辑仅使用了JavaScript的基本特性,没有涉及任何浏览器特定的API或非标准语法。然而,对于更现代...

    JavaScript定时器设置、使用与倒计时案例详解

    JavaScript定时器是Web前端开发中常用的功能,它允许开发者在一定时间后执行一个函数或者每隔一定时间周期性地执行一个函数。JavaScript定时器有两类:setTimeout()和setInterval()。 1. setTimeout()函数:它用于...

    前端开发+JavaScript+倒计时+封装+可执行的HTML模板+实现网页倒计时展示

    上文提供了一个通过 JavaScript 实现网页倒计时展示的示例代码,该代码可以方便地借助浏览器特性,在 HTML 中实现简洁美观的倒计时效果。下文将对该代码进行详细分析和描述,并阐述适用人群、使用场景及目标、以及...

    jQuery翻转倒计时定时器插件

    4. **定时器插件**: 这个插件的核心是一个JavaScript定时器,它定期执行回调函数以检查并更新倒计时状态。JavaScript的`setInterval`函数通常用于创建定时器,每间隔一定时间执行一次任务。 5. **相关文件**: - `...

    javascript倒数计时器

    在`setInterval`的回调函数中,我们需要检查时间差是否已经小于等于0,如果是,就清除定时器并显示倒计时结束的消息。否则,我们继续更新和显示剩余的时间。 在HTML文件(如timer.html)中,我们需要创建元素来显示...

    html JavaScript js倒计时跳转页面

    标题 "html JavaScript js倒计时跳转页面" 涉及到的是网页开发中的一个常见功能,即在特定时间后自动跳转至另一个页面。这个功能通常由JavaScript实现,配合HTML来显示倒计时效果。JavaScript是一种轻量级的解释型...

    【JavaScript源代码】JavaScript定时器实现限时秒杀功能.docx

    ### JavaScript定时器实现限时秒杀功能 #### 一、概述 在电商领域,限时秒杀是一种常见的促销手段,能够有效吸引用户关注并刺激购买欲望。本文将详细介绍如何使用JavaScript实现一个简单的限时秒杀功能,包括倒...

    用VBSCRIPT和JAVASCRIPT实现倒计时功能.pdf

    JavaScript实现倒计时的示例可能不依赖于ActiveX控件,而是利用JavaScript的定时器函数(如`setInterval`)和DOM操作来动态更新页面上的时间显示。 在实际应用中,创建这样的倒计时功能需要考虑以下几点: 1. **...

    javascript页面倒计时实例.docx

    总的来说,JavaScript页面倒计时是一种实用的功能,通过合理地利用JavaScript事件、定时器和DOM操作,我们可以轻松地在网页上实现这一功能。这个实例不仅适用于简单的倒计时显示,还可以扩展到更复杂的场景,如结合...

    20191023 daojishi.zip 一个页面多个倒计时 jquery javascript 之倒计时 天时分秒 ,循环 倒计时 天时分秒

    本资源“20191023 daojishi.zip”专注于使用jQuery和JavaScript实现一个页面上同时显示多个天时分秒倒计时,并且支持循环倒计时的实现方法。这里我们将详细探讨如何利用这两种技术来创建这样的功能。 首先,jQuery...

    可预置时间的倒计时定时器

    在软件实现中,我们可以利用编程语言提供的定时器函数,如JavaScript的`setInterval`或`setTimeout`,Python的`time.sleep`等,设定一个倒计时的时间间隔,然后在每次时间间隔过后更新显示的剩余时间。当时间归零时...

    JavaScript--倒计时

    5. 清理定时器:当倒计时结束时,记得使用`clearInterval`停止更新。 以下是一个简单的倒计时函数示例: ```javascript function countdown(targetDate) { const targetTime = targetDate.getTime(); const ...

Global site tag (gtag.js) - Google Analytics