<!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">
<title>Document</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/list.css">
<style>
div ul{
width: 900px;
text-align: center;
}
div ul li{
float: left;
width: 100px;
height: 100px;
background: #000;
color: #fff;
line-height: 100px;
font-size: 36px;
margin: 0 5px;
}
.cur{
background: none;
color: #000;
}
</style>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li class="cur">:</li>
<li></li>
<li></li>
<li class="cur">:</li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
var liArr = document.querySelectorAll("ul li");
window.onload = function () {
interTime();
function interTime() {
var totalTime = 3;
var totalSec = totalTime * 3600;
var timeId = setInterval(function () {
if (totalSec <= 0) {
clearInterval(timeId);
}
totalSec --;
var hour = Math.floor(totalSec / 3600);
var minute = Math.floor(totalSec % 3600 / 60);
var sec = totalSec % 60;
liArr[0].innerHTML = Math.floor(hour / 10);
liArr[1].innerHTML = hour % 10;
liArr[3].innerHTML = Math.floor(minute / 10);
liArr[4].innerHTML = minute % 10;
liArr[6].innerHTML = Math.floor(sec / 10);
liArr[7].innerHTML = sec % 10;
if(sec % 10 === 1){
liArr[7].style.background ="orange";
}else if(sec % 10 === 2){
liArr[7].style.background ="red";
}else {
liArr[7].style.background ="black";
}
}, 1000);
}
}
</script>
js 倒计时
最新推荐文章于 2020-05-24 12:26:29 发布