简单倒计时制作

最新推荐文章于 2021-05-08 15:10:47 发布

放空231

最新推荐文章于 2021-05-08 15:10:47 发布

阅读量251

点赞数

分类专栏： HTML 文章标签：倒计时简单制作 WEB

本文链接：https://blog.csdn.net/weixin_42253718/article/details/101073601

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写在开头的话，HTML CSS JS 网页web一般都是先打框架，打静态的框架及其css写出来再用js调用函数使之动起来。
倒计时思路：获取结束的时间-当前的时间>0
得到两个时间对象
var enddate=new Date(“2019-9-30 17:20:00”);
var current=new Date();
时间戳：var cha=enddate.getTime()-current.getTime();
显示出来的时间：
var ss=“距离2019年国庆放假还有”+tian+“天”+xiaoshi+“小时”+fen+“分”+miao+“秒”;
document.getElementById(“msg”).innerHTML=ss;
最后用函数让它动起来
setInterval(function(){
aa();
},1000);

代码片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#msg{
				height: 60px;
				text-align: center;
				line-height: 60px;
				font-size: 30px;
				color: white;
				background-color: deeppink;
				

			}
		</style>
	</head>
	<body>
		<div id="msg"></div>
		
		<script type="text/javascript">
			aa();
			function aa()
			{
				var enddate=new Date("2019-12-31 23:59:59");
				var current=new Date();
				var cha=enddate.getTime()-current.getTime();
				
				if(cha>0){
					var tian=cha/1000/60/60/24;
					var xiaoshi=cha/1000/60/60%24;
					var fen=cha/1000/60%60;
					var miao=cha/1000%60;
					
					tian=parseInt(tian);
					xiaoshi=parseInt(xiaoshi);
					fen=parseInt(fen);
					miao=parseInt(miao);
					
					if(tian<10){
						tian="0"+tian;
					}
					if(xiaoshi<10){
						xiaoshi="0"+xiaoshi;
					}
					if(fen<10){
						fen="0"+fen;
					}
					if(miao<10){
						miao="0"+miao;
					}
					
					var juli="距离2020年还有"+tian+"天"+xiaoshi+"小时"+fen+"分"+miao+"秒";
					document.getElementById("msg").innerHTML=juli;
				}
				else{
					document.getElementById("msg").innerHTML="倒计时已经结束！";
				}
				setInterval(function(){
					aa();
				},1000);
			}
		</script>
	</body>
</html>

放空231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单倒计时制作

写在开头的话，HTML CSS JS 网页web一般都是先打框架，打静态的框架及其css写出来再用js调用函数使之动起来。倒计时思路：获取结束的时间-当前的时间>0得到两个时间对象var enddate=new Date(“2019-9-30 17:20:00”);var current=new Date();时间戳：var cha=enddate.getTime()-curren...
复制链接

扫一扫