接受后台时间戳转换倒计时--代码分享

最新推荐文章于 2021-12-15 15:48:30 发布

转载最新推荐文章于 2021-12-15 15:48:30 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fss226/p/5431441.html

文章标签：

#json

本文介绍了一种解决网页中多个相同类名的倒计时元素冲突的方法，通过使用自定义函数选择器来精确控制每个倒计时组件，确保它们能够独立运行而不互相干扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.html

<div class="count_app count_app2" style="position: absolute;width: 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;width: 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);
　　});

})

转载于:https://www.cnblogs.com/fss226/p/5431441.html