js实现倒计时
一、前言
利用 js 简单实现倒计时 功能,分享给大家。
效果图如下:
二、 js实现倒计时代码
<!-- ↓↓↓↓↓ html代码 ↓↓↓↓↓ -->
<div class="y_Count_down">
<span>距离五一假期还有</span><br />
<font class="countTime"></font><br />
<span>猿医生!</span>
</div>
<!-- ↑↑↑↑↑ html代码 ↑↑↑↑↑ -->
<!-- ↓↓↓↓↓ js代码 ↓↓↓↓↓ -->
// 结束时间
var endtime = '2019-05-01 00:00:00';
endtime = endtime.replace(/-/g,"/"); // 解决浏览器兼容问题
endtime = new Date(endtime);
setInterval(function () {
// 开始时间
var currenttime = new Date();
// 倒计时时间 = 结束时间 - 开始时间
var result = endtime.getTime() - currenttime.getTime();
// 定义变量 d,h,m,s保存倒计时的时间
var d,h,m,s;
if (result > 0) {
d = Math.floor(result/1000/60/60/24);
h = Math.floor(result/1000/60/60%24);
m = Math.floor(result/1000/60%60);
s = Math.floor(result/1000%60);
} else {
$(".countTime").text(""); // 置空
return;
}
// 倒计时赋值
$(".countTime").text(d+"天"+h+"时"+m+"分"+s+"秒");
},1000);
<!-- ↑↑↑↑↑ js代码 ↑↑↑↑↑ -->
Now ~ ~ ~写到这里,就写完了,如果有幸帮助到你,请记得关注我,共同一起见证我们的成长。