原生js实现倒计时功能，创建元素div插入元素，时间结束替换倒计时功能，移除元素

最新推荐文章于 2023-07-27 10:32:09 发布

jiaweimin123

最新推荐文章于 2023-07-27 10:32:09 发布

阅读量1.2k

点赞数

分类专栏： html css javascript

本文链接：https://blog.csdn.net/jiaweimin123/article/details/79027782

版权

javascript 同时被 3 个专栏收录

41 篇文章 2 订阅

订阅专栏

html

26 篇文章 0 订阅

订阅专栏

css

21 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style type="text/css" rel="stylesheet">
.timer {width: 340px;height: 75px;position: absolute;display: flex;justify-content: space-between;
left: 50%;top: 62%;transform: translateX(-50%);}
.hours{width: 45px;height: 75px; border-radius: 10px;font-size: 45px;color: #000;
background-color: #666;text-align: center;line-height: 75px;font-weight: 700}
.newCreatedDiv {width: 100%;height: 100%;background-color:#444;color: white;font-size: 24px;
font-weight:700;text-align: center;line-height: 75px;text-decoration: none}
</style>
<body>
<div class="timer" id="timerStart">
<div id="hoursTen" class="hours hoursTen"></div>
<div id="hoursSingle" class="hours hoursSingle"></div>
<div class="point">
<span></span><span></span>
</div>
<div id="minutesTen" class="hours minutesTen"></div>
<div id="minutesSingle" class="hours minutesSingle"></div>
<div class="point">
<span></span><span></span>
</div>
<div id="secondTen" class="hours secondTen"></div>
<div id="secondSingle" class="hours secondSingle"></div>
</div>
<script type="text/javascript">
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}

function GetTime() {
var EndTime = new Date('2018/01/20 00:00:00');
var NowTime = new Date();
var activityTime = EndTime.getTime() - NowTime.getTime();
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (activityTime >= 0) {
d = Math.floor(activityTime / 1000 / 60 / 60 / 24);
h = Math.floor(activityTime / 1000 / 60 / 60 % 24);
m = Math.floor(activityTime / 1000 / 60 % 60);
s = Math.floor(activityTime / 1000 % 60);
var day = checkTime(d);
var hours = checkTime(h);
var minutes = checkTime(m);
var seconds = checkTime(s);
//将4个时间点存入数组，单独取出来转换成字符串，切割开，再转回成数字类型，分别放入对应的元素内，显示出来
var arr = [];
arr.push(day, hours, minutes, seconds);
var arrdd = arr[0].toString().split("");
var arrhh = arr[1].toString().split("");
var arrmm = arr[2].toString().split("");
var arrss = arr[3].toString().split("");
var hoursTen = parseInt(arrhh[0]);
var hoursSingle = parseInt(arrhh[1]);
var minutesTen = parseInt(arrmm[0]);
var minutesSingle = parseInt(arrmm[1]);
var secondTen = parseInt(arrss[0]);
var secondSingle = parseInt(arrss[1]);
document.getElementById("hoursTen").innerHTML = hoursTen;
document.getElementById("hoursSingle").innerHTML = hoursSingle;
document.getElementById("minutesTen").innerHTML = minutesTen;
document.getElementById("minutesSingle").innerHTML = minutesSingle;
document.getElementById("secondTen").innerHTML = secondTen;
document.getElementById("secondSingle").innerHTML = secondSingle;
} else {
var timerOver = document.getElementById("timerStart");
var childs = timerOver.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
timerOver.removeChild(childs[i]);
}
var btn = document.createElement('a');
var text = document.createTextNode('立即抢购！');
btn.appendChild(text);
btn.className = 'newCreatedDiv';
btn.href = "https://www.baidu.com/";
timerOver.appendChild(btn);
clearInterval(clearTimerOver)
}
}

var clearTimerOver = setInterval(GetTime, 1000);
</script>
</body>
</html>