<style>
div {
width: 400px;
height: 200px;
background-color: cornsilk;
}
span {
float: left;
margin-right: 10px;
background-color: black;
width: 50px;
height: 50px;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div class="a1">
<span class="h">1</span>
<span class="m">2</span>
<span class="s">3</span>
</div>
</body>
<script>
// 获取元素
var hour = document.querySelector(".h");
var minute = document.querySelector(".m");
var second = document.querySelector(".s");
var inputTime = +new Date("2022-4-18 18:00:00"); //返回的是用户输入时间总的毫秒数
conuntDown();
// 开启定时器
setInterval(conuntDown, 1000); //每隔一秒刷新一次
function conuntDown() {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var times = (inputTime - nowTime) / 100; //time是剩余时间总的秒数
var h = parseInt((times / 60 / 60) % 24);
h = h < 10 ? "0" + h : h;
hour.innerHTML = h;
var m = parseInt((times / 60) % 60);
m = m < 10 ? "0" + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60);
s = s < 10 ? "0" + s : s;
second.innerHTML = s;
}
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具