`
高军威
  • 浏览: 181029 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个页面多个倒计时js代码

阅读更多
粗略的整理下

解决需求:
1.解决一个页面多个倒计时
2.每隔一段时间与服务器校验一次时间
3.页面倒计时完毕后,先与服务器校验是否倒计时完毕,完毕则调用回调函数,否则继续倒计时



倒计时js函数:
/**
	 * 倒计时函数
	 * @param ids 元素id
	 * @param ifinvest 回调函数
	 * */
	function counts(ids,ifinvest){
		var interval,a=0,time,startt,tenderid;
		this.startcout=function(){
			startt = document.getElementById(ids).getAttribute("date-start");
			var nowtime = document.getElementById(ids).getAttribute("date-now");
			tenderid = document.getElementById(ids).getAttribute("tender-id");
			time = this.getSecond(startt,nowtime);
			if (!interval)
	            interval = setInterval(this.go, 1000);
		}
		this.go=function(){
			a++;
			--time;
			var str="";
			//--------------
			d = Math.floor(time / 86400),   
			h = Math.floor((time % 86400) / 3600),   
			m = Math.floor(((time % 86400) % 3600) / 60),   
			s = Math.floor(((time % 86400) % 3600) % 60); 
			
			if(a==300 || time <= 0){//每300秒与服务器校验时间
				a=0;
				$.ajax({//与服务器校验时间
					url : "web/getsysdatetime.do",
					type : "post",
					dataType : 'json',
					success : function(data) {
						var oStartDate = js_patch_getdate(startt+"");
						var oNowDate = js_patch_getdate(data+"");
						var startTime = oStartDate.getTime();
						var nowTime = oNowDate.getTime();
						time = (startTime-nowTime)>0?(startTime-nowTime)/1000:0;
						if(time<=0){
							clearInterval(interval);//清除倒计时
							ifinvest.starts();//成功的回调函数
						}
					},
					error:function(XMLHttpRequest, textStatus, errorThrown){
						clearInterval(interval);//清除倒计时
					}
				});
			}
			if (time>0){ 
				str = "<span class='day'>"+js_patch_fillZero(d, 2)+"</span>天<span class='day'>"+js_patch_fillZero(h, 2)+"</span>时<span class='day'>"+js_patch_fillZero(m, 2)+"</span>分<span class='day'>"+js_patch_fillZero(s, 2)+"</span>秒";
			}else{
				str = "<span class='day'>00</span>天<span class='day'>00</span>时<span class='day'>00</span>分<span class='day'>00</span>秒";
			}
			document.getElementById(ids).innerHTML = str;
		}
		this.getSecond=function(startdate,nowdate) {
			var oStartDate = js_patch_getdate(startdate+"");
			var oNowDate = js_patch_getdate(nowdate+"");
			
			var startTime = oStartDate.getTime();
			var nowTime = oNowDate.getTime();

			var second = (startTime-nowTime)>0?(startTime-nowTime)/1000:0;
			return second;
		}
	}
	
	/**
	 * 将字符串格式的日期(如:20150415092645)转换成js Date对象
	 * 注意Date对象的初始化方式
	 * */
	function js_patch_getdate(stime) {
		var datetime = new Date(
				parseFloat(stime.substr(0, 4)),
				parseFloat(stime.substr(4, 2) - 1),
				parseFloat(stime.substr(6, 2)),
				parseFloat(stime.substr(8, 2)),
				parseFloat(stime.substr(10, 2)),
				parseFloat(stime.substr(12, 2)));
		return datetime;
	}
	/**
	 * 格式化
	 * */
	function js_patch_fillZero(num, digit) {
		var str = '' + num;
		while (str.length < digit) {
			str = '0' + str;
		}
		return str;
	}


HTML:
<div id="timer0" tender-id="${tendermap.tender_id}" date-start="${tendermap.buy_start_time}" date-now="${starttime}">
		<span class="day">00</span>天<span class="day">00</span>时<span class="day">00</span>分<span class="day">00</span>秒
	</div>


调用:
//一般放到 $(document).ready(function() {});中
if(document.getElementById("timer0")!=null){
		var ifstarts = new if_startinvest("timer0", document.getElementById("timer0").getAttribute("tender-id"));
		var counts_1 = new counts("timer0",ifstarts);
		counts_1.startcout();
	}
分享到:
评论

相关推荐

    JS一个页面多个倒计时

    在JavaScript(JS)中,实现一个页面多个倒计时功能是一项常见的需求,特别是在电商网站上,如淘宝和京东,用于显示商品秒杀活动的倒计时。这种功能能够吸引用户注意力,增加活动的紧迫感,从而提高转化率。本文将...

    javascript 实现网页 倒计时 代码

    这个基本的倒计时功能可以适应大多数需求,但还可以根据需要进行扩展,例如添加时间格式化、处理闰秒、支持多个倒计时同时进行、自定义结束动作等。通过深入理解JavaScript的`Date`对象和事件循环机制,你可以创建更...

    jquery倒计时插件多个倒计时同时计时代码

    本文将详细讲解如何使用jQuery实现多个倒计时插件同时计时的功能,这对于创建如考试倒计时、活动倒计时等多种场景都非常有用。 首先,我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能: 1. **...

    js倒记时计码,同一页面多个倒计时

    首先,我们需要定义一个倒计时函数,它接受目标时间(毫秒)作为参数。此函数应包含一个内部循环,每秒执行一次,更新显示的倒计时数值。 ```javascript function countdown(targetTime) { const intervalId = ...

    同一页面可以批量调用的倒计时代码

    类似于团购网站的倒计时代码,同一页面可批量调用多个。实时倒计时,兼容各大主流浏览器!

    js多产品倒计时代码

    综上所述,"js多产品倒计时代码"是一个实用的JavaScript编程实例,它展示了如何用定时器和遍历技巧来实现多个独立倒计时,并提供了丰富的扩展可能性,对初学者理解JavaScript事件驱动编程和时间处理非常有帮助。...

    js倒计时源代码

    综上所述,"js倒计时源代码"涉及到JavaScript基础、`Date`对象、时间差计算、时间格式化、HTML与JavaScript交互、事件监听等多个知识点。通过分析`timer.html`文件,你可以学习到如何创建一个基本的JavaScript倒计时...

    带关闭倒计时的广告代码网页居中悬浮适合网页

    "带关闭倒计时的广告代码网页居中悬浮"是一种这样的技术,它结合了JavaScript(JS)编程语言的功能,实现了广告的动态显示、居中定位以及倒计时关闭的特性。下面我们将深入探讨这个技术的各个方面。 首先,我们来...

    html JavaScript js倒计时跳转页面

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

    jQuery多功能网页倒计时插件

    在这个特定的场景中,我们讨论的是一个基于jQuery的多功能网页倒计时插件。这个插件旨在为网页提供灵活的倒计时功能,包括但不限于手机短信验证码的60秒或120秒倒计时,以及固定日期时间的倒计时。 首先,让我们...

    js+css3倒计时动画特效

    【描述】"这是一款简单的带有动画效果js+css3实现的3秒倒计时动画特效,网页倒计时js代码。"这段描述指出这个特效是基于JavaScript和CSS3的,具有简化的动画效果,并且特别提到了其倒计时时间为3秒。这意味着开发...

    asp.net模仿淘宝聚划算一个倒计时和一页多个倒计时例子

    6. **多个倒计时管理**:如果页面上存在多个倒计时,我们需要维护一个数组或者对象来分别管理每个倒计时的状态,确保每个倒计时都能正确显示并独立更新。 7. **用户体验优化**:为了提供良好的用户体验,倒计时的...

    js实现倒计时时分秒

    在提供的压缩包文件中,"js倒计时"可能包含了一个完整的JS倒计时实现,你可以查看源代码学习更多细节,比如如何将倒计时数据显示在网页上,或者如何处理时区问题。通过深入理解这些代码,你将能更好地掌握JS实现倒...

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

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

    js实现页面的多个日期时间倒计时效果(多个拼团)

    在JavaScript编程中,实现页面上的多个日期时间倒计时效果是一项常见的需求,特别是在涉及活动或拼团场景的应用中。本文将深入探讨如何使用JavaScript来创建这样的功能,特别关注如何处理日期函数以及在页面上管理多...

    vue倒计时刷新页面不会从头开始的解决方法

    为了演示这个过程,文章中还提供了一个倒计时组件的示例代码。这个示例中定义了一个计算属性showtime来控制倒计时的显示,以及一个countDown方法来处理倒计时逻辑。在countDown方法中,通过setInterval设定1秒钟执行...

    基于django的网页倒计时

    【标题】"基于django的...总的来说,这个基于django的网页倒计时项目涵盖了Django框架的应用、前后端交互、时间处理、动态网页设计和Linux服务器管理等多个IT知识点,对于学习和提升Web开发技能是个不错的实践案例。

    javascript 倒计时 实例

    此目录下应包含实际的JavaScript代码,可能是一个或多个.js文件。主要的倒计时逻辑和jQuery功能将在此处实现,包括计算剩余时间、设置和清除定时器、更新DOM元素等。 9. **DOM操作**: 使用jQuery的`.html()`, `....

    倒计时全屏广告代码javascript

    在`js/main.js`文件中,我们可以定义一个函数来初始化广告的倒计时,并添加事件监听器来处理广告关闭和时间到达时的行为。以下是一个基本示例: ```javascript document.addEventListener('DOMContentLoaded', ...

    jquery实现倒计时,支持多行分别无限循环倒计时

    - 如果需要在同一页面上展示多个倒计时,可以使用循环结构,针对每个倒计时元素创建一个独立的倒计时实例。 - 每个倒计时元素可以通过特定的class或data属性来区分,例如`...

Global site tag (gtag.js) - Google Analytics