首页 前端知识 jQuery实现倒计时效果

jQuery实现倒计时效果

2024-02-27 11:02:08 前端知识 前端哥 877 472 我要收藏
<script type="text/javascript">
/*
@用途:jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0})
@参数:time: 结束时间,type:显示方式(0显示天数,1不显示天数)
*/
$.fn.countDown = function (opt) {
var opt = $.extend(
{
time: null,
type: 0,
},
opt
);
var edtime = new Date(opt.time).getTime(), //月份是实际月份-1
edsecond = (edtime - new Date().getTime()) / 1000;
var eday = $(this).find(".day"),
ehour = $(this).find(".hour"),
eminute = $(this).find(".minute"),
esecond = $(this).find(".second");
var timer = setInterval(function () {
if (edsecond > 1) {
let Html = "";
edsecond -= 1;
var day = Math.floor(edsecond / 3600 / 24),
hour = Math.floor((edsecond / 3600) % 24),
minute = Math.floor((edsecond / 60) % 60),
second = Math.floor(edsecond % 60);
if (opt.type === 1) {
hour = day * 24 + hour;
}
Html = `${opt.type === 0 ? day + "天" : ""}${
hour < 10 ? "0" + hour : hour
}小时 ${minute < 10 ? "0" + minute : minute}${
second < 10 ? "0" + second : second
}秒`;
$("#time").html(Html);
} else {
clearInterval(timer);
}
}, 1000);
};
$(function () {
$(".time").countDown({
time: "2023/3/26 18:00:00",
type: 0, // 0显示天 1不显示天
});
});
</script>
复制
<span id="time"></span>
复制

效果

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2835.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!