js实现倒计时demo实例实现多少天多少小时多少分钟多少秒-草莓互联

推荐阅读

NO.1 二次开发使网站无限接近“完美”

phpweb已经是国内最强的的开源电子商务系统了，但并非完美，因为任何...

NO.2 二次开发使网站永远“年轻”

互联网3年一轮回，京东凡客等电商品牌在三年之前也不过是小打小闹，而如...

NO.3 二次开发使您领先于同行

电商已经成为趋势，传统行业的竞争已经逐渐演变到网络上，也有不少用Weboss...

NO.4 二次开发使网站更符合行业...

phpweb系统是固定的模式，适用于大部分行业与需求。但有一些行业还是有自己...

您现在的位置：草莓互联 > 资讯动态 > 开发指南 > js实现倒计时demo实例实现多少天多少小时多少分钟多少秒

js实现倒计时demo实例实现多少天多少小时多少分钟多少秒

发表：管理员发表时间：2020-09-11 10:05:35 阅读：(2496)次

<!DOCTYPE html>

<html>

<head>

<title>草莓互联-倒计时效果</title>

<style>

.wrap {width:400px; margin:50px auto; color:#333; font-family:'5FAE8F6F96C59ED1';}

.wrap-date {font-size:0; list-style:none outside none; margin-top:8px;}

.wrap-date li {width:80px; display:inline-block; *display:inline; *zoom:1; text-align:center; font-size:24px; background:hotPink; padding:1px 0 5px; margin-right:3px;}

.date {font-family:Tahoma; font-size:50px; color:#fff;}

#endTips {color:#999; background:#e9e9e9; line-height:2.4em; text-align:center; margin-top:15px;}

</style>

var targetDate = '2022-09-11';// 目标日期du（活动截止zhi时间）

// 创建倒计时定时器

var timer = window.setInterval(function(){

RefreshTime(targetDate);

},1000);

function RefreshTime(targetDate){

// 获取本地当前时间，截止时间 - 当前时间 = 倒计时时间

var Today = new Date();

var endDate = new Date(targetDate);

var leftTime = endDate.getTime() - Today.getTime();

var leftSecond = parseInt(leftTime / 1000);

var Day = Math.floor(leftSecond / (60 * 60 * 24));

var Hour = Math.floor((leftSecond - Day * 24 * 60 * 60) / 3600);

var Minute = Math.floor((leftSecond - Day * 24 * 60 * 60 - Hour * 3600) / 60);

var Second = Math.floor(leftSecond - Day * 24 * 60 * 60 - Hour * 3600 - Minute * 60);

if (Day < 0) {

clearInterval(timer); // 清除定时器

document.getElementById('endTips').innerHTML = '活动已结束';

document.getElementById('wrapDate').style.display = 'none';

return;

}

// 写入容器

document.getElementById('timeDay').innerHTML = Day;

document.getElementById('timeHour').innerHTML = Hour;

document.getElementById('timeMin').innerHTML = Minute;

document.getElementById('timeSec').innerHTML = Second;

}

</script>

</head>

<body>

距活动结束仅剩：

</ul>

</div>

</body>

</html>

上一篇：宝塔面板Let's Encrypt免费SSL证书无法自动续签的Bug

下一篇：Thinkphp5增加语言包进行多语言切换？

假如我们资讯/文章对您有所帮助，您可以通过扫描捐赠二维码支持一下我们~

感谢您对我们的支持,您的小小支持让我们有信心走得更远!