`
Luob.
  • 浏览: 1588897 次
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript 计时器,倒计时

阅读更多
先看效果
//列表的的效果

//单个效果




 var bjtimer={
			sysTime:0,  //服务器时间毫秒数
			timeBodyName:"timecontainer", //显示时间的容器
			timeBodyTag:"div",
			showFmt:"dd天HH时mm分ss秒",
			notstartMsg:"即将开始:",
			startingMsg:"剩余时间:",
			afterStart:"活动进行中", //开始后的内容
			afterEnd:"活动已结束",  //结束后是否设置 提示内容
			stimeAttName:"stime",  //自定义属性
			etimeAttName:"etime",
			onlyFmt:"showFmt",  //单个元素的格式
			notstartHead:"nsmsg",
			startingHead:"simsg",
			showDay:true,  //是否采用天
			fmt_24:true, //是否采用  24小时格式
			isUnion:true,  //开始后,时候进去 倒计时 剩余时间 
			timeOutArr:new Array(),  //保存启动了的计时器对象,用于清除
			startTimerOut:function(){
				if(bjtimer.sysTime <=0){
					alert("请先设置bjtimer.sysTimer为服务器时间");
					return;
				}else{
					var timeBodyArray =bjtimer.getElesByName(bjtimer.timeBodyTag,bjtimer.timeBodyName);
				    for(var i=0;i<timeBodyArray.length;i++){
				    	clearTimeout(bjtimer.timeOutArr[i]); //清空
				    	var ele=timeBodyArray[i];
				    	//获取元素的自定义属性
				    	var stimenode=ele.attributes[bjtimer.stimeAttName];
				    	var etimenode=ele.attributes[bjtimer.etimeAttName];
				    	var fmtnode=ele.attributes[bjtimer.onlyFmt];
				    	var nsnode=ele.attributes[bjtimer.notstartHead];
				    	var sinode=ele.attributes[bjtimer.startingHead];
				    	
				    	var stime=0;
				    	var etime=0;
				    	var onlyfmt=bjtimer.showFmt;
				    	var nsmsg=bjtimer.notstartMsg;
				    	var simsg=bjtimer.startingMsg;
				    	
				    	if(stimenode!=null || !stimenode===undefined){
				    		if(stimenode.nodeValue.indexOf("/")!=-1){
				    			stime=converToDate(stimenode.nodeValue);
				    		}else{
				    			stime=stimenode.nodeValue;
				    		}
				    	}
				    	if(etimenode!=null || !etimenode===undefined){
				    		if(etimenode.nodeValue.indexOf("/")!=-1){
				    			etime=converToDate(etimenode.nodeValue);
				    		}else{
				    			etime=etimenode.nodeValue;
				    		}
				    	}
				    	
				    	if(fmtnode!=null || !fmtnode===undefined){
				    		onlyfmt=fmtnode.nodeValue;
				    	}
				    	if(nsnode!=null || !nsnode===undefined){
				    		nsmsg=nsnode.nodeValue;
				    	}
				    	if(sinode!=null || !sinode===undefined){
				    		simsg=sinode.nodeValue;
				    	}
				    	//启用计时器
				    	bjtimer.timerOutRun(ele,stime,etime,bjtimer.sysTime,i,onlyfmt,nsmsg,simsg);
				    }
				}
			},
			timerOutRun:function(ele,stime,etime,systime,i,showFmt,nsmsg,simsg){
				var remainTime=0;
				var type=1;  //默认为为开始
				if(stime > systime){
					type=1; //未开始
					remainTime= stime - systime;
				}else{
					if(bjtimer.isUnion){
						type=0; //将结束
						remainTime= etime - systime;
					}
				}
				var nD = 0;
				var nH = 0;
				if(bjtimer.showDay){
					nD = parseInt(remainTime/(1000*60*60*24));
					nH = parseInt(remainTime/(1000*60*60)) % 24;   
				}else{
					nH = parseInt(remainTime/(1000*60*60));   
				}
			    var nM = parseInt(remainTime/(1000*60)) % 60;   
			    var nS = parseInt(remainTime/1000) % 60;   
			    if(bjtimer.fmt_24){
			    	nD=nD < 10 ? "0"+nD : nD;
			    	nH=nH < 10 ? "0"+nH : nH;
			    	nM=nM < 10 ? "0"+nM : nM;
			    	nS=nS < 10 ? "0"+nS : nS;
			    }
			    var showCont=showFmt;
				showCont=showCont.replace("dd",nD);
				showCont=showCont.replace("HH",nH);
				showCont=showCont.replace("mm",nM);
				showCont=showCont.replace("ss",nS);
				if(type==1){
					showCont=nsmsg+showCont;
					stime=stime-1000;
				}else{
					showCont=simsg+showCont;
					etime=etime-1000;
				}
				
				if(remainTime<=0){
					clearTimeout(bjtimer.timeOutArr[i]);
					var msg = (type==1) ? bjtimer.afterStart : bjtimer.afterEnd;
					if(msg!=""){
						ele.innerHTML=msg;
					}else{
						ele.innerHTML=showCont;
					}
				}else{
					ele.innerHTML=showCont;
					bjtimer.timeOutArr[i]=setTimeout(function(){bjtimer.timerOutRun(ele,stime,etime,systime,i,showFmt,nsmsg,simsg);},1000); //bjtimer.timerOutRun("+ele+","+stime+","+etime+","+i+")"	
				}
			},
			getElesByName:function(tag, name){
			    var returns = document.getElementsByName(name);
			    if(returns.length > 0) return returns;
			    returns = new Array();
			    var e = document.getElementsByTagName(tag);
			    for(var i = 0; i < e.length; i++){
			        if(e[i].getAttribute("name") == name){
			            returns[returns.length] = e[i];
			        }
			    }
			    return returns;
			},isToday:function(systime,ctime){
				return systime.getFullYear()==ctime.getFullYear() && systime.getMonth()==ctime.getMonth() && systime.getDate()==ctime.getDate();
			},dateDiff:function(stime,etime){//计算两个时间 相差的天数
				return (stime-etime)/(1000*3600*24);
			}
			
	}



//用法
列表的用法 一般用在div  ul > li 里面 
可支持 不同div ,li 显示的 倒计时 格式不一样

//注意 要显示 倒计时的 标签名字为 timecontainer 然后在这个表情上自定义属性 stime etime, showFmt,notstartMsg  等属性,

<div class="rest_time" name="timecontainer" stime="<fmt:formatDate value="${brandhd.starttime}" pattern="yyyy/MM/dd HH:mm:ss"/>" etime="<fmt:formatDate value="${brandhd.endtime}" pattern="yyyy/MM/dd HH:mm:ss"/>" ></div>

然后在窗体加载事件里面写
$(functtion(){
bjtimer.sysTime=systimes.getTime();  //系统的 毫秒数
bjtimer.startTimerOut();
});


//例2:

<!--计时开始-->
  <div class="g_timer_wrap">
     <div class="g_timer" id="g_timer" name="timecontainer" nsmsg="距活动开始还有:" simsg="距活动结束还有:" showFmt="[i]dd[/i]天[i]HH[/i]时[i]mm[/i]分[i]ss[/i]秒" stime="<fmt:formatDate value="${superBrandHd.starttime}" pattern="yyyy/MM/dd HH:mm:ss"/>" etime="<fmt:formatDate value="${superBrandHd.endtime}" pattern="yyyy/MM/dd HH:mm:ss"/>">
     </div>
  </div>

$(function(){
bjtimer.sysTime=converToDate('<%=sysdate%>').getTime(); 
bjtimer.startTimerOut();
}):

  • 大小: 297.7 KB
  • 大小: 29.6 KB
  • 大小: 51 KB
0
0
分享到:
评论

相关推荐

    多功能计时器-倒计时器

    在IT行业中,计时器和倒计时器是常见的实用工具,尤其在组织各类活动或比赛中,它们扮演着至关重要的角色。"多功能计时器-倒计时器"这款应用程序,正如其标题所示,旨在提供一种高效且灵活的计时解决方案,适应多种...

    javascript实现计时器

    "JavaScript实现计时器"这个主题涉及到JavaScript编程中的一个常见任务:创建一个可以随着时间流逝更新的计时器。计时器在各种网页应用中都有广泛的应用,如倒计时、实时显示时间等。下面我们将深入探讨如何使用...

    javascript 倒计时 实例

    在这个实例中,我们结合了JavaScript、CSS和jQuery来创建一个动态且具有视觉效果的倒计时计时器。以下是相关知识点的详细说明: 1. **JavaScript基础**: JavaScript是一种广泛使用的客户端脚本语言,它在网页上...

    计时器(倒计时,正计时)demo

    2. **JavaScript计时器原理**:计时器功能通常由JavaScript的`setInterval()`或`setTimeout()`函数实现。在这个Demo中,倒计时和正计时可能通过这两个函数进行控制,`setInterval()`用于周期性执行某段代码,而`...

    javascript秒表计时器

    JavaScript秒表计时器是一种基于Web的计时工具,它利用JavaScript语言的特性和功能来实现计时功能,用户可以通过JavaScript代码控制计时器的启停。在网页开发中,这种计时器常用于游戏、在线测试或者任何需要精确...

    计时器倒计时器裁判员专用

    【计时器与倒计时器技术解析】 在软件开发领域,计时器和倒计时器是常见的功能模块,广泛应用于各种应用中,如体育赛事、考试计时、健身训练等。计时器用于记录从某个时间点开始流逝的时间,而倒计时器则从设定的...

    JavaScript BOM操作 计时器趣味案例 示例代码

    JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味...

    计时器(秒表、倒计时)

    在IT领域,计时器和倒计时是两种常见的时间管理工具,广泛应用于各种软件、网页和移动应用中。在给定的标题“计时器(秒表、倒计时)”中,我们可以理解这是一个集成了秒表和倒计时功能的程序。描述中提到它是“单...

    html5 LED计时器_LED倒计时器样式特效

    在网页设计和开发中,这种计时器常用于创建吸引用户的动态时间显示,比如活动倒计时、考试倒计时等场景。LED计时器因其独特的视觉效果,能引起用户注意并提升用户体验。 LED计时器的核心在于JavaScript,它通过控制...

    jsp,javascript计时器

    javascript简单的编写的时间计时器

    基于JavaScript的倒计时器的设计.pdf

    本文主要讨论了基于JavaScript的倒计时器的设计,涉及到倒计时器的意义、JavaScript语言在应用中的特性、倒计时器的界面和脚本设计、本设计的特点等知识点。 知识点1:倒计时器的意义 倒计时器是一种常见的计时...

    理想Web倒计时器的设计与实现

    然而,传统的JavaScript实现的倒计时器存在诸多局限性,比如无法防止页面刷新或关闭后重新计时、计时不够精确等问题。本文旨在探讨一种结合动态脚本(如ASP、PHP、JSP)与JavaScript技术的新型倒计时器设计方案,该...

    使用javascript实现的计时器秒表

    在这个场景中,我们关注的是如何利用JavaScript来实现一个计时器秒表功能,这通常用于游戏、测试或者任何需要实时时间追踪的应用。 在JavaScript中,`setTimeout()`函数是一个核心的异步编程工具,它可以安排一个...

    JavaScript计时器示例分析

    JavaScript计时器是Web开发中一种重要的功能,允许开发者在特定的时间间隔之后执行代码,而不是在代码执行时立即运行。计时器分为两种类型:一次性计时器和间隔性触发计时器。 一次性计时器指的是只在指定的延迟...

    JS做的环形倒计时

    6. **颜色和进度管理**:环形倒计时可能会有不同颜色区分不同的时间段,这可以通过CSS的类选择器和JavaScript的条件语句来实现。同时,根据剩余时间计算环形进度,更新对应元素的宽度或透明度。 7. **事件处理**:...

    flash 倒计时器 源码 两个版本

    本文将深入探讨“Flash倒计时器”的源码,包括两个不同的版本,以及如何根据需求进行定制。 首先,让我们了解一下什么是Flash倒计时器。Flash倒计时器是一种基于Flash技术实现的动态计时工具,它能够在网页上实时...

    javascript倒数计时器

    JavaScript倒数计时器是一种...以上就是JavaScript倒计时器的基本实现。通过这个功能,我们可以创建一个简单的网页,用户可以清楚地看到距离特定日期还有多少时间。这个例子中的代码简洁明了,适合初学者学习和参考。

    js计时器数字卡片翻转秒表计时器网页特效

    首先,我们要理解JavaScript计时器的工作原理。在JavaScript中,`setInterval`和`setTimeout`函数是实现定时任务的核心。`setInterval`用于周期性地执行某段代码,而`setTimeout`则会在指定时间后执行一次。在这个...

    djs.rar_DJS哪里的时间_djs_倒计时_倒计时器_倒计时计时器

    在技术实现上,DJS倒计时器通常基于编程语言如JavaScript或Python开发,通过计算当前时间与目标时间之间的差值,动态更新界面的显示。对于Web应用,它可能利用浏览器提供的Date对象和定时器API(如setTimeout或...

    可定制flash倒计时器 带源码

    本文将深入探讨“可定制flash倒计时器 带源码”这一主题,它涉及到的主要技术包括Flash、倒计时器的实现、ActionScript编程语言以及可能的多场景应用。 首先,Flash倒计时器是一种动态展示时间流逝的互动元素,通常...

Global site tag (gtag.js) - Google Analytics