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

目录

一、简要说明

二、页面核心代码

三、CSS样式代码

四、JavaScript脚本代码

五、页面效果截图

六、我的心得体会

---

一、简要说明

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

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

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

二、页面核心代码

	
		
		
		
		
		
	
	
		
		
			

				
TODOLIST | 我欲摘星斗
			
			

				
首页
				
番茄钟
				
备忘录
				
纪念日
				
日记本
				
关于我
				
退出登录
			
		
		
		
			
				
				
					
						
ToDoList
						
我欲摘星斗
						
来日纵是千千晚星，亮过今晚月亮
人们的月亮永悬不落，有爱就能螳臂当车
						

							

							

							

							

							

							

						
					
				
				
				
					
						纪念日
INTRODUCTION
						

							

						
						

						

							纪念日是指一些重要的日子。
						
						

						

							在生活中，有些事情，有些日子，我们是不能忘记的，我们需要它来提醒自己的每一步和每一天。
						
					
				
			
		
		
		
			
				
					
				
			
		
		
		
			距离2022考研倒计时
			
			Nice To Meet You!
			来日纵是千千晚星
亮过今晚月亮
			
			
			
				
			
		
		
		
			

				

					
					

						
							上一页
						
					
					

					
					

						
							首页
						
					
					

					
					

						
							下一页
						
					
				
			
		
		
		
			
				

					
TODOLIST | 我欲摘星斗
					
由xxx设计推出，让每一个有自律愿望的用户能够养成自律的习惯，奠定实现梦想的基础。
				
			
			
				

					联系我们
					

					

				

					邮箱：3xxx@qq.com

					电话：1xxx(工作日周一至周五：8:30-11:30，13:00-17:00)
				
				

					所有页面中的部分文字、图片来源于网络，仅用于期末作业设计（侵删）。
				
			
		
	

三、CSS样式代码

body {
	width: 2275px;
	height: 3200px;
	font-family: "汉仪南宫体";
	font-size: 12px;
	color: white;
	background-image: linear-gradient(to bottom right,
			#06565b, #66a4ac, #c2dde4);
}

@font-face {
	font-family: "微软雅黑";
	src: url(dqc.ttf);
}


body,
ul,
li,
h4.img {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

p {
	text-indent: 2em;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}


.to1 {
	list-style-type: none;
	align-content: center;
	float: right;
	margin: 30px 100px 20px 0;
}

.to2 {
	text-align: center;
	color: #ffffff;
	font-size: 30px;
	font-family: "微软雅黑";
	float: left;
	margin: 12px;
	align-content: center;
}

.to3 {
	text-align: center;
	font-size: 40px;
	list-style-type: none;
	font-family: "微软雅黑";
	align-content: center;
	float: left;
	margin: 30px 0px 30px 100px;
}

a:link,
a:visited,
a:active,
a:hover {
	color: #ffffff;
	text-decoration: none;
}


.banner {
	width: 2180px;
	height: 838px;
	margin: 50px auto 15px auto;
	overflow: hidden;
}

.left {
	width: 1646px;
	height: 838px;
	font-weight: bold;
	background: url(../img/banner图3.jpg);
	position: relative;
	float: left;
}

.content_left {
	position: absolute;
	top: 400px;
	right: 45px;
	text-align: right;
}

.school_en {
	font-size: 60px;
	font-family: "arial black";
	color: #FFffff;
	text-shadow: 0 1px #06565b;
}

.school_ch {
	font-size: 100px;
	font-family: "楷体";
	color: #ffffff;
	text-shadow: 0 1px #06565b;
	border-right: 5px solid #f90;
	padding-right: 10px;
}

.advertise {
	margin-top: 20px;
	font-size: 40px;
	color: #ffffff;
	text-shadow: 0 1px #06565b;
}

ul.style_a {
	margin-top: 25px;
	margin-left: 120px;
	list-style: none;
	overflow: hidden;
}

ul.style_a li {
	float: left;
	margin-left: 10px;
}

ul.style_a li a {
	background: #fff;
	width: 46px;
	height: 3px;
	text-align: center;
	line-height: 22px;
	display: block;
	font-size: 18px;
	opacity: 0.3;
}

ul.style_a li.current a {
	opacity: 0.8;
}

.right {
	width: 534px;
	height: 838px;
	background: #06565b;
	float: right;
	position: relative;
}

.content_right {
	position: absolute;
	top: 50px;
	left: 30px;
}

h4 {
	font-size: 28px;
	font-family: "微软雅黑";
}

ul.style_icon {
	margin-top: 10px;
}

ul.style_icon li {
	float: left;
	margin-right: 30px;
}

.cl {
	font-size: 28px;
	margin-top: 80px;
	margin-right: 30px;
	line-height: 30px;
}

.cl2 {
	font-size: 28px;
	margin-top: 20px;
	margin-right: 30px;
	line-height: 30px;
	text-indent: 2em;
}


.main_login {
	width: 2180px;
	height: 300px;
	align-items: center;
}

.login_page {
	margin: 100px 500px;
	width: 60%;
	align-items: center;
}

.login_img {
	margin: 0 auto;
	width: 150px;
	height: 150px;
	border: 15px solid hsla(0, 0%, 100%, .2);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	overflow: hidden;
}

.login_1 {
	margin: 400px 300px 0px 300px;
	height: 250px;
}

.login_2 {
	width: 100px;
	height: 65px;
	align-items: center;
	align-self: center;
}

h2 {
	font-size: 24px;
	font-family: 微软雅黑;
	color: #FFFFFF;
	text-align: center;
}

.login {
	border: none;
	outline: none;
	width: 7rem;
	height: 3rem;
	border-radius: 5rem;
	background-color: #283654;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.25rem;
	transition: .5s;
}


.timer_main {
	width: 800px;
	height: 800px;
}

.time-box {
	margin: 100px auto;
	left: 38%;
	position: absolute;
	width: 600px;
	height: 600px;
	font-size: 50px;
	line-height: 600px;
	text-align: center;
	color: rgb(255, 255, 255);
	text-shadow: -3px -3px 3px #1f9792, 3px 3px 3px #9dd7d5;
	border-radius: 50%;
	box-shadow: 6px 6px 3px #1f9792 inset, -6px -6px 3px #9dd7d5 inset;
}

strong {
	position: absolute;
	left: 50%;
	top: 82%;
	margin-left: -375px;
	margin-top: 1250px;
	font-size: 40px;
	color: #FFFFFF;
	text-align: center;
	width: 800px;
	height: 100px;
	font-style: normal;
	font-family: '微软雅黑', sans-serif;
}


span {
	position: absolute;
	left: 51%;
	top: 80%;
	margin-left: -270px;
	margin-top: 1400px;
	font-size: 40px;
	color: #ffffff;
	line-height: 60px;
	text-align: center;
	width: 550px;
	height: 140px;
}

i {
	position: absolute;
	left: 55%;
	top: 95%;
	margin-left: -275px;
	text-align: center;
	font-size: 40px;
	color: #ffffff;
	line-height: 500px;
}


.qq {
	position: absolute;
	left: 49.5%;
	top: 88.8%;
	margin-top: 720px;
	font-size: 40px;
	border: 5px dashed #ffffff;
	background-color: #fff;
	width: 60px;
	
	height: 60px;
	overflow: hidden;
	border-radius: 50%;
	animation: music 15s;
	
	-webkit-animation: music 15s linear infinite;
	background-image: url(/结课大作业/img/default.jpeg) ;
	background-size: cover;
	z-index: 999;
}

@keyframes music {
	from {
		transform: rotate(0deg) translate(330px) rotate(0deg);
	}

	to {
		transform: rotate(360deg) translate(330px) rotate(0deg);
	}
}

@-webkit-keyframes music {
	from {
		transform: rotate(0deg) translate(330px) rotate(0deg);
	}

	to {
		transform: rotate(360deg) translate(330px) rotate(0deg);
	}
}


.music-box2 {
	position: fixed;
	left: 0;
	bottom: 10px;
	width: 100%;
	height: 80px;
}

iframe {
	height: 80px;
	width: 100%;
}


.end {
	width: 100%;
	height: 450px;
	background-color: #fcfefe;
	margin: 50px auto;
}

.end_left {
	width: 1200px;
	height: 300px;
	margin: 100px;
	align-content: center;
	float: left;
}

.end_title {
	list-style-type: none;
	overflow: hidden;
	align-content: center;
	text-align: center;
}

.end1 {
	font-size: 70px;
	color: #000000;
	text-align: center;
}

.end2 {
	font-size: 30px;
	color: #000000;
	text-align: left;
	text-indent: 2em;
	margin: 50px;
}

.end_right {
	width: 770px;
	height: 300px;
	margin: 100px 100px 100px 0px;
	font-size: 30px;
	color: #000000;
	float: right;
	text-align: left;
	text-indent: 0em;
}

.end_right p {
	text-indent: 0em;
}

.end_state {
	width: 770px;
	height: 50px;
	font-size: 15px;
	color: gray;
	text-align: center;
	margin: 80px;
	float: inline-end;
}

四、JavaScript脚本代码

var time_now_server, time_now_client, time_end, time_server_client;
time_end = new Date("2022/12/24 00:00:00");
time_end = time_end.getTime();
time_now_server = new Date();
time_now_server = time_now_server.getTime();
setTimeout("show_time()", 1000);

function show_time() {
	var timer = document.getElementById("timer");
	var hourid = document.getElementById("hour");
	if (!timer) {
		return;
	}
	timer.innerHTML = time_now_server;
	var time_now, time_distance, str_time;
	var int_day, int_hour, int_minute, int_second;
	var time_now = new Date();
	time_now = time_now.getTime();
	time_distance = time_end - time_now;
	if (time_distance > 0) {
		int_day = Math.floor(time_distance / 86400000)
		time_distance -= int_day * 86400000;
		int_hour = Math.floor(time_distance / 3600000)
		time_distance -= int_hour * 3600000;
		int_minute = Math.floor(time_distance / 60000)
		time_distance -= int_minute * 60000;
		int_second = Math.floor(time_distance / 1000)
		if (int_hour < 10)
			int_hour = "0" + int_hour;
		if (int_minute < 10)
			int_minute = "0" + int_minute;
		if (int_second < 10)
			int_second = "0" + int_second;
		str_time = int_day + "天" + int_hour + "小时" + int_minute + "分钟" + int_second + "秒";
		timer.innerHTML = str_time;
		setTimeout("show_time()", 1000);
	} else {
		timer.innerHTML = 0;
	}
}

五、页面效果截图

六、我的心得体会

这辈子没想过选了文科还要上理科的课，但是比Python爬虫有意思多了，希望再也不需要见到这个大数据学院的老师，信女愿戒掉猪肉以祈求与jing老师在课表安排上此生不复相见。