js计时器
Posted cuter、
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js计时器相关的知识，希望对你有一定的参考价值。
<!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>
div {
width: 60px;
height: 60px;
background-color: red;
float: left;
margin: 0 30px;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="hour"></div>
<div class="minu"></div>
<div class="second"></div>
<script>
window.addEventListener('load', function() {
var hs = document.querySelector('.hour');
var ms = document.querySelector('.minu');
var ss = document.querySelector('.second');
var inputTime = +new Date('2021-6-9 18:00:00');
countDowm(); //先调用一次函数，防止第一刷新页面有空白
function countDowm() {
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
var h = parseInt(times / 60 / 60 % 24);
h = h > 10 ? h : '0' + h;
var m = parseInt(times / 60 % 60);
m = m > 10 ? m : '0' + m;
var s = parseInt(times % 60)
s = s > 10 ? s : '0' + s;
hs.innerHTML = h;
ms.innerHTML = m;
ss.innerHTML = s;
}
setInterval(countDowm, 1000)
})
</script>
</body>
</html>
以上是关于js计时器的主要内容，如果未能解决你的问题，请参考以下文章
JUC并发编程 共享模式之工具 JUC CountdownLatch（倒计时锁） -- CountdownLatch应用（等待多个线程准备完毕（ 可以覆盖上次的打印内）等待多个远程调用结束）(代码片段