今天有个需求,要在页面上做当前时间距离下个月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根据时间戳倒计时的更多相关文章

  1. JS实现自动倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. JS基于时间戳写的浏览访问人数

    Title:JS基于时间戳写的浏览访问人数  --2013-12-23 14:07 <script language="JavaScript"> var timesta ...

  3. js格式化时间戳

    //js格式化时间戳,转换为时间格式  2017-1-15 4:10:15 function getLocalTime(nS) { var time = new Date(parseInt(nS) * ...

  4. js的 new Date()日期格式化显示以及js获取时间戳

    一.日期格式化显示: 对 new Date() 得到日期的进行格式显示扩展,扩展方法如下: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分 ...

  5. js中时间戳转换成时间格式

    js中时间戳转换成时间格式, // 时间戳转换成时间格式 var formatDate = function(date){ date = new Date(date); var y=date.getF ...

  6. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  7. JS简单的倒计时(代码优化)

    倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ funct ...

  8. js格式化时间 js格式化时间戳

    一个js格式化时间和js格式化时间戳的例子. 代码:/** * 时间对象的格式化; */Date.prototype.format = function(format) { /* * eg:forma ...

  9. js获取时间戳的三种方式

      js获取时间戳的三种方式 CreateTime--2018年5月23日08:44:10 Author:Marydon // 方式一:推荐使用 var timestamp=new Date().ge ...

随机推荐

  1. 团队作业4——第一次项目冲刺(ALpha版本)第四天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 完善了昨天的的代码---前端的HTML页面设计 2.功能 完成后台数据处理的全部基本功能: a.数据结构设计及数据交 ...

  2. 201521123019 《Java程序设计》第8周学习总结

    1. 本章学习总结 2. 书面作业 一.List中指定元素的删除(题目4-1) for (int i = list.size()-1; i >=0; i--) {//从最后一个元素开始删除 if ...

  3. Java 第四周总结

    1. 本周学习总结 2. 书面作业 注释的应用: (1)源文件注释采用 /** -- */,在每个源文件的头部要有必要的注释信息,包括:文件名:文件编号:版本号:作者:创建时间:文件描述包括本文件历史 ...

  4. 201521123017 《Java程序设计》第3周学习总结

    1. 本周学习总结 2. 书面作业 Q1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...

  5. 201521123036 《Java程序设计》第3周学习总结

    本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来. 书面作业 Q1:代码阅读 public class Test1 { private ...

  6. 201521123087 《Java程序设计》第1周学习总结

    1.学习总结 初步了解面对对象编程思想 学会安装JDK和设置JAVA_HOME,PATH,CLASSPATH环境变量 简单了解java 2.书面作业 1.为什么java程序可以跨平台运行?执行java ...

  7. 201521123100《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  8. 201521123023《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. (1)File可以表示一个特定文件的名称,也能表示一个目录下的一组文件的名称. (2)继承自InputStre ...

  9. 201521123089 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 常用异常 题目5-11.1 截图你的提交结果(出现学号) 1.2 自己以前编 ...

  10. Eclipse rap 富客户端开发总结(2):rap项目目前的进度和存在的问题

    1. Eclipse rap项目目前的进度 目前rap 的最新版本是 rap 1.5M4,最稳定版本是 rap 1.4.1,我们项目目前使用的版本是rap 1.4.1,Rap目前已经支持的部分是 sw ...