最近公司在上活动 有一个倒计时的功能需要开发
这里碰到的问题是要从服务器获取当前时间
最后解决了 记录一下 给后来人一些参考
核心js代码
sto = null;
function _$(id) {
return document.getElementById(id);
}
//start eg: 2014-12-1 12:00:00
function getSeconds(endDate, nowDate) {
var d = (new Date(endDate)).getTime() - (new Date(nowDate)).getTime();
return d > 0 ? d : 0;
}
/**
* 启动函数
* @param endDate 结束时间 格式为2015/5/5 11:11:11
* @param nowDate 当前时间 格式为2015/5/5 11:11:11
*/
function run(endDate, nowDate) {
var sec = getSeconds(endDate, nowDate)/1000;
var d = parseInt(sec/(60*60*24), 10);
var h = parseInt((sec/(60*60) - d*24), 10);
var m = parseInt(sec/60 - d*24*60 - h*60);
var s = parseInt(sec - d*24*60*60 - h*60*60 - m*60);
var timer = {
d: d,
h: h,
m: m,
s: s
};
toHTML(timer);
var sto = setInterval(function() {
timer = mulit(timer);
if(timer.d === -1) {
clearInterval(sto);
} else {
toHTML(timer);
}
},1000);
}
function mulit(tmpTimer) {
var t = tmpTimer;
var d = t.d;
var h = t.h;
var m = t.m;
var s = t.s;
if(s > 0) {
s -= 1;
}else {
m -= 1;
s = 59;
}
if(m < 0) {
h -= 1;
m = 59;
}
if(h < 0) {
d -= 1;
h = 23;
}
return {
d: d,
h: h,
m: m,
s: s
};
}
function toHTML(timer) {
var t = timer;
if(t.d === 0 && t.m === 0 && t.s === 0){
$("#gif_hm").hide();
$("#t_hm").show();
}
if(t.d < 10){
$("#t_d").html("0"+t.d.toString());
}else{
$("#t_d").html(t.d);
}
if(t.h < 10){
$("#t_h").html("0"+t.h.toString());
}else{
$("#t_h").html(t.h);
}
if(t.m < 10){
$("#t_m").html("0"+t.m.toString());
}else{
$("#t_m").html(t.m);
}
if(t.s < 10){
$("#t_s").html("0"+t.s.toString());
}else{
$("#t_s").html(t.s);
}
}
代码放到github上了
https://github.com/itmyhome/countdown
分享到:
相关推荐
在JavaScript(JS)编程中,实现获取服务器时间并进行倒计时...通过上述步骤,你可以创建一个从服务器获取时间并进行倒计时的JavaScript应用。确保在实际项目中考虑时区差异、网络延迟以及用户设备时间的准确性等因素。
由于秒杀涉及的时间和服务器时间的同步对于确保活动的公平性和准确性至关重要,因此,如何使用JavaScript实现与服务器时间同步的商品秒杀倒计时成为了本篇讨论的核心内容。 首先,需要明确在实现秒杀倒计时时应避免...
通过JSP,获取服务器时间,然后将其传递给JavaScript脚本,JavaScript脚本再将服务器时间与倒计时目标时间进行比较,计算剩余时间,并更新倒计时显示。 知识点3:JavaScript倒计时实现 在本资源中,使用了...
为了确保与服务器时间同步,我们可以定期向服务器发送请求,获取服务器当前时间,并用其更新本地的倒计时。 ```javascript // 每隔1秒检查一次服务器时间 setInterval(function() { fetchServerTime().then(server...
JavaScript(简称JS)倒计时是一种常见的Web前端功能,用于实现各种计时需求,例如活动结束倒计时、考试开始倒计时等。在给定的"js倒计时源码"中,我们可以探讨以下几个关键知识点: 1. **JavaScript基础**: - ...
为了确保时间的准确性和一致性,可以将考试的结束时间存储在服务器端,每次页面加载时向服务器请求这个时间,或者在用户开始考试时获取并存储一个唯一的开始时间戳,这样即使页面刷新也能恢复正确的倒计时。...
JavaScript(简称JS)倒计时源码是一种常见的前端开发技术,用于实现网页上的时间计时功能,例如活动截止、考试开始等场景。本资源包含一个实现了天、小时、分钟和秒显示的倒计时功能的JS代码示例。下面将详细讲解JS...
如果`timer.html`是从服务器获取的,考虑到跨域限制,JavaScript可能无法直接访问本地文件系统。因此,确保你的开发环境支持跨域请求或使用Web服务器来托管你的文件。 综上所述,"js倒计时源代码"涉及到JavaScript...
在本文中,我们将深入探讨如何使用JavaScript来实现获取当前时间以及倒计时功能。 一、获取当前时间 在JavaScript中,获取当前时间通常使用`Date`对象。你可以创建一个新的`Date`实例,然后通过其方法获取年、月、...
在网页开发中,短信验证码是验证用户身份的重要手段,它通常与倒计时功能结合,以防止用户频繁发送验证码,减轻服务器压力,并提供良好的用户体验。本文将深入探讨如何实现一个js短信验证码倒计时功能,同时确保在...
对于Web应用,可以使用JavaScript在客户端进行倒计时,但服务器端的逻辑类似。 在实际开发中,可能还需要处理闰秒、时区转换等问题,以及异常处理和性能优化。总的来说,C#提供了丰富的日期时间操作功能,实现倒...
在本文中,我们将深入探讨如何使用JavaScript实现一个功能完整的倒计时功能,包括从服务器获取结束时间以及实时更新显示。 首先,HTML部分(代码1-11行)创建了一个简单的页面结构,包含一个CSS类`fontmark`用于...
总的来说,"js 倒计时.zip"中的源码很可能是实现上述逻辑的一个简单实例,通过阅读和理解这段代码,开发者可以学习到如何在JavaScript中创建倒计时功能,并将其应用到实际项目中。在实践中,开发者还可以根据需求...
- 首先,我们需要确定倒计时的目标时间(targetTime),这可以是用户输入的日期字符串,或者服务器返回的数据。 - 接着,我们用`new Date()`获取当前时间,然后计算目标时间与当前时间的差值,得到毫秒数。 - ...
通常,JS会获取服务器时间或用户本地时间,然后与设定的目标日期进行比较,计算出剩余时间,并每秒更新一次HTML元素的内容。 `demo.png`可能是这个倒计时效果的一个预览图,让用户在部署前能直观地看到最终展示的...
4. **时间格式化**:倒计时需要将剩余时间转换为天、小时、分钟和秒等单位,这需要对日期和时间处理的理解,通常通过编程语言如JavaScript的Date对象来完成。 5. **实时更新**:倒计时必须实时更新,这需要定时器...
2. **倒计时逻辑**:在前端,收到服务器返回的有效时间后,可以启动一个定时器(`setInterval`),每秒更新显示的倒计时。倒计时界面通常显示如 "验证码已发送,请在XX秒内输入" 的提示。当计时结束,调用 `...
3. 倒计时逻辑:当点击按钮后,启动一个定时器(setTimeout或setInterval),更新按钮文本显示剩余时间,并在时间到时解除按钮的禁用状态。 4. 可能会使用`clearTimeout`或`clearInterval`来取消已设置的定时器,以...
在IT行业中,"前台同步服务器倒计时"是一种常见的用户界面功能,特别是在需要等待服务器响应或者执行特定操作之前,向用户展示剩余时间的情况。这种功能能够提升用户体验,让用户明确了解系统正在后台处理,并且知道...
二是通过服务器端存储,例如在服务器上设置一个session,当页面加载时,从服务器获取倒计时状态。 6. **用户交互**:为了让用户可以自定义倒计时的总值,可以设计一个表单让用户输入结束时间,或者选择结束日期和...