js根据时间戳倒计时
今天有个需求,要在页面上做当前时间距离下个月1号的倒计时。在网上找了很多案例也试了很多,大部分都是获取本地当前时间,然后设置结束时间进行计算,然后倒计时。但是有几个问题:
1.如果本地时间和服务器时间是一样的那么就不会出现什么问题,
2.由于无法保证所有用户的本地时间都与服务器时间相同,而使用 new Date() 获取的本地时间,那么如果用户修改本地时间,就会对倒计时进行影响,从而出现问题
解决办法:
从后台获取 开始时间和结束时间的时间戳来进行倒计时,这样的话就不用去管本地的时间是否与服务器系统时间相同
具体代码如下:
<time id="timer">26天6小时</time>
第一种使用setInterval来进行倒计时
<script>
var startTime=1508428800;//开始时间
var endTime=1508428860; //结束时间
setInterval(function(){
var ts =endTime-startTime;//计算剩余的毫秒数
console.log(ts);
var dd = parseInt(ts / 60 / 60 / 24, 10);//计算剩余的天数
var hh = parseInt(ts / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts % 60, 10);//计算剩余的秒数
dd = checkTime(dd);
hh = checkTime(hh);
mm = checkTime(mm);
ss = checkTime(ss);
if(ts>0){
document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
startTime++;
}else if(ts<0){
document.getElementById("timer").innerHTML="00:00:00";
location.reload();
}
},1000);
function checkTime(i){
if (i < =10) {
i = "0" + i;
}
return i;
}
</script>
第二种使用setTimeout来进行倒计时
var startTime2=$('.start').html();//开始时间
var endTime2=$('.end').html(); //结束时间
var countup=function(){
var ts =endTime2-startTime2;//计算剩余的毫秒数
var dd = parseInt(ts / 60 / 60 / 24, 10);//计算剩余的天数
var hh = parseInt(ts / 60 / 60 % 24, 10);//计算剩余的小时数
var mm = parseInt(ts / 60 % 60, 10);//计算剩余的分钟数
var ss = parseInt(ts % 60, 10);//计算剩余的秒数
dd = checkTime(dd);
hh = checkTime(hh);
mm = checkTime(mm);
ss = checkTime(ss);
if(dd>0){
$('.happy_money').html('已获取收益资格,系统将在'+dd+'天后将收益发放到您的账户,请注意查收哦!');
}
if(hh>1 && dd<=0){
$('.happy_money').html('已获取收益资格,系统将在'+hh+'小时后将收益发放到您的账户,请注意查收哦!');
}
if(hh<1 && dd<=0){
$('.happy_money').html('已获取收益资格,系统将在'+mm+'分钟后将收益发放到您的账户,请注意查收哦!');
}
if(ts>0){
$('#timer').html(dd + "天" + hh + "时" + mm + "分" + ss + "秒");
startTime2++;
}
else if(ts<=0){
$('#timer').html("00:00:00");
location.reload();
}
setTimeout(countup, 1000);
};
function checkTime(i){
if (i < 10) {
i = "0" + i;
}
return i;
}
countup(); 以上两种都是根据获得两个时间戳,进行倒计时。简单的效果。但是由于第一次写倒计时,在测试的时候遇到一些问题,IOS手机的safari浏览器不支持两个数相减得到的倒计时,就算把数字转换成数字类型得到的也是NaN,所以最后的结论是只让后台给出结束时间与
开始时间的差值时间戳就可以了,这样的话,就不会出现任何问题。
js根据时间戳倒计时的更多相关文章
- JS实现自动倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- JS基于时间戳写的浏览访问人数
Title:JS基于时间戳写的浏览访问人数 --2013-12-23 14:07 <script language="JavaScript"> var timesta ...
- js格式化时间戳
//js格式化时间戳,转换为时间格式 2017-1-15 4:10:15 function getLocalTime(nS) { var time = new Date(parseInt(nS) * ...
- js的 new Date()日期格式化显示以及js获取时间戳
一.日期格式化显示: 对 new Date() 得到日期的进行格式显示扩展,扩展方法如下: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分 ...
- js中时间戳转换成时间格式
js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- JS简单的倒计时(代码优化)
倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ funct ...
- js格式化时间 js格式化时间戳
一个js格式化时间和js格式化时间戳的例子. 代码:/** * 时间对象的格式化; */Date.prototype.format = function(format) { /* * eg:forma ...
- js获取时间戳的三种方式
js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...
随机推荐
- JavaScript事件循环(Event Loop)机制
JavaScript 是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决定 ...
- 规则集之探究何时使用HashSet、LinkedHashSet以及TreeSet?
前言 Java集合框架三种主要类型的集合:规则集(Set).线性表(List).队列(Queue).Set用来存储不可重复的元素:List用来存储有元素构成的有序的集合:而Queue则用于存储用先进先 ...
- 团队作业1——团队展示&选题
Deadline: 2017-4-5 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的四个方面 团队博客 团队选题 团队计划 团队成员贡献分分配规则 晚交 - 0 ...
- 【1414软工助教】团队作业6——展示博客(Alpha版本) 得分榜
题目 团队作业6--展示博客(Alpha版本) 作业提交情况情况 为所欲为 团队没有提交,其余都按时提交. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2: ...
- 【Beta】 第二次Daily Scrum Meeting
一.本次会议为第二次meeting会议 二.时间:13:30AM-13:55AM 地点:禹州 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 对已完成的功能进行进一步测试,以便 ...
- 201521123061 《Java程序设计》第十一周学习总结
201521123061 <Java程序设计>第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 本周学习的是如何解决多线程访问中的互斥 ...
- 201521123015 《Java程序设计》第3周学习总结
本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点. 书面作业 Q1.代码阅读 publi ...
- 201521123060 《Java程序设计》第10周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 异常: 1.不要乱用异常: 2.异常发生时:确定异常类型,异常位置: 3.尽量使用已有的异常类. 多线程: 2 ...
- 从java的开始,java概述,java配置环境变量
一.java开发入门 java 概述 Java划分为三个技术平台:JavaSE(标准版,含Java基础类库),JavaEE(企业版,技术平台),JavaME(小型版,小型产品.嵌入式设备) Jav ...
- Linux入门_2-基础命令
Linux入门-基础命令 目录 日期命令date 修改时区 日历命令cal 关机启动命令halt,reboot,poweroff whoami.who.who am i.w screen ...