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);
});}})}