<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li class="time0"></li>
<li class="time1"></li>
<li class="time2"></li>
</ul>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
var data = [
{
id: 1,
time: 20000
},
{
id: 2,
time: 15000
},
{
id: 3,
time: 40000
}
]
function cutTime(cutTotalTime, index){
var timer = setInterval(function(){
if(cutTotalTime <= 0){
clearInterval(timer);
}else{
cutTotalTime--;
let h = parseInt(cutTotalTime/3600);
let m = parseInt(cutTotalTime%3600/60);
let s = parseInt(cutTotalTime%60);
console.log("时分秒：", h, m, s);
let timeText = `${h}时:${m}分:${s}秒`;
$(".time"+index).text(timeText);
}
}, 1000)
}
for(let i = 0; i < data.length; i++){
let timein = parseInt(data[i].time / 1000);
cutTime(timein, i);
}
</script>
</body>
</html>
