今天有个需求,要在页面上做当前时间距离下个月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. nrm的安装 、定义和用法

    因为npm包管理工具是属于国外的,所以在中国使用它下载东西的时候比较慢.这时我们就想用国内的淘宝镜像.也有别的,所以当你想切换下载源的时候就会用到nrm了. ###首先,nrm是什么呢? 开发的npm ...

  2. css编写注意事项(不定时更新)

    CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...

  3. 四,ESP8266 TCP服务器

    我要赶时间赶紧写完所有的内容....朋友的东西答应的还没做完呢!!!!!!!没想到又来了新的事情,,....... 配置模块作为TCP服务器然后呢咱们连接服务器发指令控制继电器吸合和断开 控制的指令呢 ...

  4. RobotFramework自动化测试框架-移动手机自动化测试Input Text和Click Button关键字的使用

    Input Text和Click Button Input Text 关键字一般用来给输入框进行输入操作,该关键字接收两个参数[ locator | text ]. 示例1:启动安卓手机上一个APP的 ...

  5. python--学校管理系统(只做了学校管理的接口)

    1.老师的要求是做学校管理.学生.老师的接口,本文档,只做了学校管理的接口 2.具体要求: 角色:学校.学员.课程.讲师 要求: 1. 创建北京.上海 2 所学校 2. 创建linux , pytho ...

  6. 团队作业2——需求分析&原型设计

    Deadline: 2017-4-14 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个方面 需求分析 原型设计 编码规范 晚交 - 0分 迟交两周以上 - ...

  7. 团队作业8——第二次项目冲刺(Beta阶段)--第三天

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 学号 成员 贡献比 201421123001 廖婷婷 16% 201421123002 翁珊 16% 201421123004 ...

  8. 在配置github中遇到的一些问题

    这次在配置github时,我出现了问题,就是在我装好Git以后,我打开Git Bash,输入了这句代码:$ ssh-keygen -t rsa -C "your_email@youremai ...

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

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind List列表:元素以线性方式存放,允许有重复的对象. Set集:集合中的对象不按特定的方式排序,并且 ...

  10. sublime主题安装

    网上发现与之前最相近的两款皮肤分别是Theme – Soda与Flatland.这里就记录一下安装与使用方法. 方法一:手动下载安装: 1.下载安装SublimeText2,这个我就不说了.网上的版本 ...