期末大作业 | ToDoList网页设计纪念日界面设计记录

本文链接：https://blog.csdn.net/weixin_61726211/article/details/125147064

一、简要说明

本模块旨在讲用户觉得重要的日子以倒计时的方式呈现出来，就目前的能力来设计，还无法实现用户自定义日期的倒计时，因此将2022年考研时间作为倒计时的主体来显示，并在页面中心制作了一个每15秒旋转一周的小圆圈，以增加美感。

利用JavaScript脚本设计一个日期倒计时，设定日期为2022年考研，形成一个2022考研倒计时，并搭配可以关闭的自动播放的背景音乐。

参考文章：http://t.csdn.cn/hLoRK

二、页面核心代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倒计时</title>
		<link href="css/daojishi.css" rel="stylesheet" type="text/css" />
		<!-- 引用谷歌英语字体 -->
		<link href="https://fonts.font.im/css?family=Anton" rel="stylesheet">
		<!-- 引用倒计时js功能 -->
		<script src="js/daojishi.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 导航栏 -->
		<div>
			<ul class="to3">
				<li>TODOLIST&nbsp;|&nbsp;我欲摘星斗</li>
			</ul>
			<ul class="to1">
				<li class="to2"><a href="首页.html">首页</a></li>
				<li class="to2"><a href="番茄钟.html">番茄钟</a></li>
				<li class="to2"><a href="备忘录.html">备忘录</a></li>
				<li class="to2"><a href="倒计时.html">纪念日</a></li>
				<li class="to2"><a href="日记本.html">日记本</a></li>
				<li class="to2"><a href="关于我.html">关于我</a></li>
				<li class="to2"><a href="index.html">退出登录</a></li>
			</ul>
		</div>
		<!-- banner开头通栏 -->
		<div>
			<div class="banner">
				<!--左侧通栏-->
				<div class="left">
					<div class="content_left">
						<p class="school_en">ToDoList</p>
						<p class="school_ch">我欲摘星斗</p>
						<p class="advertise">来日纵是千千晚星，亮过今晚月亮<br>人们的月亮永悬不落，有爱就能螳臂当车</p>
						<ul class="style_a">
							<li class="current"><a href="img/banner图.jpg"></a></li>
							<li class="current"><a href="img/banner图1.jpg"></a></li>
							<li class="current"><a href="img/banner图3.jpg"></a></li>
							<li class="current"><a href="img/banner图4.jpg"></a></li>
							<li class="current"><a href="img/banner图5.jpg"></a></li>
							<li class="current"><a href="img/banner图6.jpg"></a></li>
						</ul>
					</div>
				</div>
				<!--右侧通栏-->