动态倒计时网页效果的实现

Lonelycity

2024-10-14

前端

实现一个HTML5的动态倒计时网页效果

一、项目流程

创建基本的HTML结构
使用CSS美化网页
添加JavaScript交互效果
测试和优化网页的效果

二、实现步骤

1. 创建基本的HTML结构

首先，我们需要一个简单的HTML文件，来搭建页面的骨架。

这里我们定义了网页的结构，包含标题、按钮并引入了CSS、JavaScript文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>倒计时</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="box">
			<h4>距离春节<br />(2025-1-29)还剩余:</h4>
			
			<span class="span1" id="span1"></span>
			<font class="font1">  天</font>
			
			<span class="span2" id="span2"></span>
			<font class="font2">个小时</font>
			
			<span class="span3" id="span3"></span>
			<font class="font3">分钟</font>
			
			<span class="span4" id="span4"></span>
			<font class="font4">秒</font>
			
			<script type="text/javascript" src="js/index.js" ></script>
		</div>
	</body>
</html>

2.使用CSS美化网页

我们需要创建一个外部的CSS文件 index.css，用来编辑设置样式。

.box{
	width:300px;
	height: 300px;
	border-radius: 150px;
	background-color:darkcyan;
	border: 1px solid darkcyan;
	margin: 200px auto;
	position: relative;
	box-shadow: 0px 0px 10px darkcyan;
}
.box h4{
	margin: 0px;
	color: white;
	font-size: 25px;
	margin-top: 22px;
	text-align: center;
}
.box .span1{
	display: block;
	width: 150px;
	height: 50px;
	background-color: darkgray;
	float: left;
	margin-top: 25px;
	margin-left: 42px;
	text-align: center;
	line-height: 50px;
	font-size:30px;
	font-weight: bold;
	box-shadow: 0px 0px 5px black inset;
}
.box .font1{
	display: block;
	font-size: 30px;
	margin-top: 28px;
}

.box .span2{
	display: block;
	width: 40px;
	height: 40px;
	background-color: darkgray;
	position:absolute;
	top: 188px;
	left: 42px;
	text-align: center;
	line-height: 40px;
	font-size:30px;
	box-shadow: 0px 0px 5px black inset;
}
.box .font2{
	display: block;
	width: 50px;
	height: 40px;
	/*background-color: pink;*/
	position: absolute;
	top: 188px;
	left: 84px;
	text-align: center;
	line-height: 40px;
}

.box .span3{
	display: block;
	width: 40px;
	height: 40px;
	background-color: darkgray;
	position:absolute;
	top: 188px;
	left: 136px;
	text-align: center;
	line-height: 40px;
	font-size:30px;
	box-shadow: 0px 0px 5px black inset;
}
.box .font3{
	display: block;
	width: 33px;
	height: 40px;
	/*background-color: pink;*/
	position: absolute;
	top: 188px;
	left: 178px;
	text-align: center;
	line-height: 40px;
}

.box .span4{
	display: block;
	width: 40px;
	height: 40px;
	background-color: darkgray;
	position:absolute;
	top: 188px;
	left: 213px;
	text-align: center;
	line-height: 40px;
	font-size:30px;
	color: red;
	box-shadow: 0px 0px 5px black inset;
}
.box .font4{
	display: block;
	width: 23px;
	height: 40px;
	/*background-color: pink;*/
	position: absolute;
	top: 188px;
	left: 255px;
	text-align: center;
	line-height: 40px;
}

3.添加JavaScript代码实现动态倒计时功能效果

我们需要创建一个外部的JS文件 index.js，用来编辑设置动态打字机的操作。

function djs(){
	var xtsj = new Date(),
        yjsj = new Date("2025-1-29"),
        sjc=yjsj.getTime()-xtsj.getTime(),
        tian = Math.floor(sjc/(1000*60*60*24)),
        shi = Math.floor(sjc/(1000*60*60)%24),
        fen = Math.floor(sjc/(1000*60)%60),
        miao = Math.floor(sjc/1000%60);
        
        document.getElementById("span1").innerHTML=tian;
        document.getElementById("span2").innerHTML=shi;
        document.getElementById("span3").innerHTML=fen;
        document.getElementById("span4").innerHTML=miao;
}
setInterval(djs,1000);

4. 测试和优化

完成以上步骤后，务必确保在不同设备和浏览器上测试你的页面，查看响应式设计是否有效，并对代码进行优化。例如，确保CSS选择器高效，避免过多的DOM操作等