倒计时案例时分秒

最新推荐文章于 2023-03-04 12:30:31 发布

南逗

最新推荐文章于 2023-03-04 12:30:31 发布

阅读量538

点赞数 1

本文链接：https://blog.csdn.net/weixin_46217523/article/details/105952350

版权

本文详细介绍了如何创建一个从当前时间到未来指定时间的倒计时功能，包括使用JavaScript的setInterval实现动态更新，显示时、分、秒的逻辑，以及通过innerHTML填充计算结果，并探讨了初次加载页面时可能出现的空白问题和解决方案。

摘要由CSDN通过智能技术生成

介绍
现在时间到未来某一时间还有多长时间
未来时间手动输入（2020-3-1 18:00:00）

倒计时案例分析
1.这个倒计时是不断变化的，因此需要定时器来自动变化（setInterval）
2.三个黑色盒子分别存放时分秒
3.三个黑色盒子利用innerHTML放入计算的时分秒数
4.第一次执行也是间隔毫秒数，因此刚刷新会有空白
5.最好采用封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			div{
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				margin:20px 3px;
				display: inline-block;
				background: #000000;
				color: white;
			}
			
		</style>