zoukankan      html  css  js  c++  java
  • 接受后台时间戳转换倒计时--代码分享

    1.html代码:
    <div class="count_app count_app2" style="position: absolute; 100%;height: 100%;left: 20%;">
    <div class="HotDate CountMsg" style="display: none;position: absolute;bottom: 3px;">
    <span>距活动开始还有:</span>
    <span class="conunt t_d"></span>
    <span>天</span>
    <span class="conunt t_h"></span>
    <span>时</span>
    <span class="conunt t_m"></span>
    <span>分</span>
    <span class="conunt t_s"></span>
    <span>秒</span>
    </div>
    </div>

    <div class="count_app count_app2" style="position: absolute; 100%;height: 100%;left: 20%;">
    <div class="HotDate CountMsg" style="display: none;position: absolute;bottom: 3px;">
    <span>距活动开始还有:</span>
    <span class="conunt t_d"></span>
    <span>天</span>
    <span class="conunt t_h"></span>
    <span>时</span>
    <span class="conunt t_m"></span>
    <span>分</span>
    <span class="conunt t_s"></span>
    <span>秒</span>
    </div>
    </div>

    2.js代码:
    //解决页面两个倒计时同一个class名字,冲突问题
    function $$(selector, context) {
    return [].slice.call((context || document).querySelectorAll(selector));
    }
    function getRTime() {
    $.post('/bonus/getAcivityReminderTime', function (d) {
    if (typeof d === 'string') d = JSON.parse(d);
    //秒
    var nowTime = +d.msg, endTime = Math.floor(new Date('2015/8/18').getTime() / 1000);
    var t = endTime - nowTime;

    function showTime() {
    t = t - 1;
    if (t <= 0) {
    clearInterval(timer);
    $('.CountMsg').hide()
    }
    var d = Math.floor(t / 86400);//天
    var h = Math.floor(t % 86400 / 3600);//小时
    var m = Math.floor(t % 86400 % 3600 / 60);//分
    var s = Math.floor(t % 86400 % 3660 % 60);//秒
    $$('.t_d').forEach(function (item) {
    item.textContent = d;
    });
    $$('.t_h').forEach(function (item) {
    item.textContent = h;
    });
    $$('.t_m').forEach(function (item) {
    item.textContent = m;
    });
    $$('.t_s').forEach(function (item) {
    item.textContent = s;
    });
    }

    var timer = setInterval(showTime, 1000);
    var w = $$('.CountMsg');
    w.forEach(function (item) {
    item.style.display = "block";
    });
    
    
    if (t <= 0) {
      w.forEach(function (item) {
      item.style.display = "none";
      item.parentNode.removeChild(item);
      });
    }
    })
    }



     

  • 相关阅读:
    联通手机号停机保号了,想恢复要短信验证码登陆但是无法接收短信验证码怎么办
    记卖饭让我先吃
    POJ 3658 Artificial Lake
    POJ 3662 Telephone Lines (dijstra+二分)
    CodeForces 748C Santa Claus and Robot
    CodeForces 748B Santa Claus and Keyboard Check
    POJ 3659 Cell Phone Network(树形dp树的最小点支配集)
    【JZOJ 5455】拆网线 【树形DP】
    【JZOJ 5455】拆网线 【树形DP】
    【JZOJ 5455】拆网线 【树形DP】
  • 原文地址:https://www.cnblogs.com/fcan/p/4742572.html
Copyright © 2011-2022 走看看