(更新)HTML+CSS制作一个高考倒计时

2020-07-09更新

  • 修复倒计时归零后出现负数的bug
  • 自动切换至下一年日期

起因

最近听到要开学的消息,就会想到考试,提到考试自然就会想到受本次疫情影响的高考考生。最后琢磨着做一个高考倒计时网页。为了时间长一点,我特地把日期调为了2021年的高考(别问我,我也不知道我是怎么想的)。然后呢。。。我并不会html/css(因为学业繁忙,又一直以来专注学C语言),于是就跟着B站制作新年倒计时网页的视频抄了抄代码~~ (图片都不换的那种) ~~,勉强搞出来了。
这里附上原地址:Bilibili

代码

** html代码 **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Countdown to NCEE</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2><span>Countdown to NCEE</span> 2021</h2>
<div class="countdown">
<div id="day">NA</div>
<div id="hour">NA</div>
<div id="minute">NA</div>
<div id="second">NA</div>
</div>
</div>

</body>
</html>
<script type="text/javascript">

function getEndTime(myYear){
var myEndTime = new Date(''+myYear+'/06/07 00:00:00');
return myEndTime;
}

function countDown(){
var mydate = new Date();
var year = '2021';
var EndTime = getEndTime(year);
var NowTime = new Date();
if( (EndTime.getTime() - NowTime.getTime() ) < 0){
year = mydate.getFullYear() + 1;
EndTime = getEndTime(year);
}
var t = EndTime.getTime() - NowTime.getTime();



var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60);

document.getElementById('day').innerText = d;
document.getElementById('hour').innerText = h;
document.getElementById('minute').innerText = m;
document.getElementById('second').innerText = s;
}
setInterval(countDown,1000)
</script>

** CSS代码 **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}

body
{
background: #000 url(bg.jpg);
background-attachment: fixed;
background-blend-mode: hard-light;
}

.container{
position: absolute;
top: 80px;
left: 100px;
right: 100px;
bottom: 80px;
background: url(bg.jpg);
background-attachment: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 50px 50px rgba(0,0,0,0.5),
0 0 0 100px rgba(0,0,0,.1);
}

.container h2 {
text-align: center;
font-size: 10em;
line-height: 0.7em;
color: #333;
margin-top: -80px;
}

.container h2 span{
display: block;
font-weight: 300;
letter-spacing: 6px;
font-size: 0.2em;
}
.countdown{
display: flex;
margin-top: 50px;
}
.countdown div{
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background: #333;
color: #fff;
margin: 0 15px;
font-size: 3em;
font-weight: 500;
}
.countdown div:before{
content: '';
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
height: 35px;
background: #ff0;
color: #333;
font-size: 0.35em;
line-height: 35px;
font-weight: 300;
}
.container #day:before{
content: 'Days';
}
.container #hour:before{
content: 'Hours';
}
.container #minute:before{
content: 'Minutes';
}
.container #second:before{
content: 'Seconds';
}

Git地址

Gitee:https://gitee.com/cairbin/nceecountdown

项目演示地址:https://cairbin.gitee.io/nceecountdown/

Search For You自己制作的 一个浏览器导航页

说明

最近实在是用腻了国内的一些导航页,edge和chrome的新页标签在我看来不怎么美观,所以就自己动手写了一个。

  • PC和手机端都做了适配(头一次搞,手机端有些不完美)
  • 使用了二次元随即壁纸API
  • 部分内容在B站上学的

内容

如图所示:

Search For You

地址:https://search.cairbin.top

CSS将网页设置为全灰色

内容

今天是清明节,是沉重的一天,是因新冠肺炎牺牲者的哀悼日。许多博客和网站都设置为灰色色调,下面讲述设置方法。

在自定义css或者主题css文件中添加以下代码

1
2
3
html{
-webkit-filter: grayscale(100%);
}

LoveKKComment插件修改邮件模版并美化

方法

[scode type=”yellow”]本插件版本1.0.5[/scode]

在该插件目录中找到reply.html文件,删除并新建reply.html写入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<table style="width:99.8%;height:99.8%">
<tbody>
<tr>
<td>
<div style="background: white;
width: 95%;
max-width: 800px;
margin: auto auto;
border-radius: 5px;
border:orange 1px solid;
overflow: hidden;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.18);">
<header style="overflow: hidden;">
<img style="width:100%;z-index: 666;" src="https://ftp.bmp.ovh/imgs/2020/03/c124a3068b0ba6c8.jpg">
</header>
<div style="padding: 5px 20px;">
<p style="position: relative;
color: white;
float: left;
z-index: 999;
background: orange;
padding: 5px 30px;
margin: -25px auto 0 ;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.30)">Dear&nbsp;{author}</p>
<br>
<h3>您有一条来自<a style="text-decoration: none;color: orange " target="_blank" href="{blogUrl}">{blogName}</a>的回复</h3>
<br>
<p style="font-size: 14px;">您在文章《{title}》上发表的评论:</p>
<p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">{text}</p>
<p style="font-size: 14px;">{replyAuthor} 给您的回复如下:</p>
<p style="border-bottom:#ddd 1px solid;border-left:#ddd 1px solid;padding-bottom:20px;background-color:#eee;margin:15px 0px;padding-left:20px;padding-right:20px;border-top:#ddd 1px solid;border-right:#ddd 1px solid;padding-top:20px">{replyText}</p>

<div style="text-align: center;">
<img src="https://ftp.bmp.ovh/imgs/2020/03/8423219bbff23d56.png" alt="hr" style="width:100%;
margin:5px auto 5px auto;
display: block;">
<a style="text-transform: uppercase;
text-decoration: none;
font-size: 14px;
border: 2px solid #6c7575;
color: #2f3333;
padding: 10px;
display: inline-block;
margin: 10px auto 0; " target="_blank" href="{permalink}">点击查看回复的完整內容</a>
</div>
<p style="font-size: 12px;text-align: center;color: #999;">请勿直接回复<br>
©{blogName}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>

##相关参数##

1
2
3
4
5
6
7
8
{blogUrl} //博客地址
{blogName} //博客名称
{author} //被回复者名称
{permalink} //文章链接
{title} //文章标题
{text} //被回复者评论内容
{replyAuthor} //回复者名称
{replyText} //回复内容

效果展示

效果

##感谢##

感谢大佬 摩尔 的帮助