$.fn.timer2 = function () {
return $(this).each(function () {
var e = $(this),
t = null,
s = null;
t = setInterval(function () {
return set = function () {
clearTimeout(s);
var n = new Date(e.attr(“time”)),
o = new Date(),
u = hour = minute = second = 0,
r = n – o;
if (r > 0) {
u = Math.floor(r / 864e5);
r -= 864e5 * u;
hour = Math.floor(r / 36e5);
r -= 36e5 * hour;
minute = Math.floor(r / 6e4);
r -= 6e4 * minute;
second = Math.floor(r / 1e3);
if (hour < 10) hour = “0” + hour;
if (minute < 10) minute = “0” + minute;
if (second < 10) second = “0” + second;
e.html(“” + u + “” + hour + “” + minute + “” + second + “秒”);
} else {
e.html(“活动已结束“);
clearInterval(t);
}
s = setTimeout(set, 1e3);
}(), 1e3);
e.html(“00000000秒”);
});
});
};

这个插件的功能可以分解为以下几个步骤:

初始化: 对每个调用 timer2 的元素设置一个倒计时。
获取时间: 从元素的 time 属性中获取目标时间。
计算剩余时间: 计算目标时间与当前时间的差值。
更新显示: 每秒更新显示,直到倒计时结束。
显示结束信息: 当倒计时结束时,显示“活动已结束”的消息。

使用方法
引入 jQuery: 在 HTML 文件中引入 jQuery 库。
设置目标时间: 为每个需要倒计时的元素添加 time 属性,值为目标时间的时间戳。
调用插件: 在 JavaScript 中调用 timer2 插件。

<div id=“timer1” time=“2024-06-20T00:00:00Z”></div>

<script>
$(document).ready(function() {
$(‘#timer1’).timer2();
});
</script>

作者 admin

百度广告效果展示