倒计时功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.css {
width: 200px;
height: 30px;
background-color: burlywood;
/* color: orange; */
line-height: 30px;
font-family: serif;
text-align: center;
}
.hand {
display: inline-block;
background: #333;
border-radius: 4px;
width: 28px;
height: 28px;
margin: 0 5px;
font-size: 18px;
color: #fff;
vertical-align: middle;
text-align: center;
line-height: 28px;
}
</style>
</head>
<body>
<div id="cd">
倒计时为:
<div class="hand">
</div>:
<div class="hand"></div>:
<div class="hand"></div>:
<div class="hand"></div>
</div>
<script>
function Downtime(time) {
var nowtime = +new Date();//获取当前时间
var inputTime = +new Date(time);
var times = (inputTime - nowtime) / 1000;//得到的是毫秒,1秒等于1000毫秒
var day = parseInt(times / 60 / 60 / 24);//秒转化为天
var hour = parseInt(times / 60 / 60);//秒转化为小时
var minute = parseInt(times / 60 % 60);
var s = parseInt(times % 60);
var arr = [day, hour, minute, s];
return arr;
}
var arr = Downtime('2021-5-8 18:00:00');
var vale = document.querySelector('#cd').querySelectorAll('.hand');
for (var i = 0; i < arr.length; i++) {
vale[i].innerHTML = arr[i];
}
console.log(arr);
console.log(vale[0].innerHTML);
</script>
</body>
</html>