zoukankan      html  css  js  c++  java
  • 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,所以最后的结论是只让后台给出结束时间与
    开始时间的差值时间戳就可以了,这样的话,就不会出现任何问题。

     

      

  • 相关阅读:
    IOS模拟器
    Android Monkey 测试实例
    Android log分析
    Android压力测试-Monkey
    IOS 压力测试-UI AutoMonkey
    Appium
    在chrome下鼠标拖动层变文本形状的问题
    学习笔记:利用GDI+生成简单的验证码图片
    利用FileStream实现多媒体文件复制
    C#读取Excel文件:通过OleDb连接,把excel文件作为数据源来读取
  • 原文地址:https://www.cnblogs.com/qiuchuanji/p/7615544.html
Copyright © 2011-2022 走看看