(更新)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%);
}

HTML学习笔记——实体转义与块级行级元素

转义字符

1
2
3
4
5
6
7
&lt;    <!-- 小于号(<) -->
&gt; <!-- 大于号(>) -->
&amp; <!-- 与号(&) -->
&nbsp; <!-- 空格 -->
&copy; <!-- 版权号(©) -->
&times; <!-- 乘号(×) -->
&divide; <!-- 除号(÷) -->

块级元素与行级元素

块级元素

** 特性: **

  • 相当于执行display:block操作
  • 独占一行
  • ** 宽度和高度都是可控的,如果没设置其宽度,将默认铺满整行 **
  • 其内部可以包含块级元素和行级元素

如下:

1
2
<div></div>
<p></p>

行级元素

** 特性: **

  • 相当于执行了display:inline
  • 不会独占一行,与相邻的行级元素占同一行,直到占满,会自动掉到下一行
  • ** 宽度和高度不可控 **
  • 其内部只能包含行级元素

如下:

1
2
<strong></strong>
<span></span>

区别

分别给 * 块级元素p标签 * 和 * 行级元素span标签 * 设置如下属性

1
2
3
4
<p style="width:300px; height:50px; background:gray;">p</p>

<span style="width:300px; height:50px; background:gray;">span</span>

如图:
属性区别

我们可以明显看出 * 块级元素p标签 * 独占一行且可控宽度和高度(看颜色)
而 * 行级元素span标签* 并不独占一行,且不可控宽度和高度(看颜色)

行级、块级元素相互转换

二者可以相互转化,只需在其style中设置display的属性即可

例如:

1
2
3
4
5
<!-- 块级标签p转换成行级 -->
<p style="display:inline;"></p>

<!-- 行级标签span转换成块级 -->
<span style="display:block"></span>

HTML学习笔记——单双标签

单双标签

单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 换行符 -->
<br/>
<!-- 水平线 -->
<hr/>
<!-- 图片标签 -->
<img/>
<!-- 文本标签 -->
<input/>
<!-- link标签 -->
<link/>
<!-- 元信息标签 -->
<meta/>

双标签

“开始标签”“结束标签” 两部分组成,必须成对使用。

常见的有

1
2
3
4
5
6
7
8
<p></p>
<html></html>
<title></title>
<body></body>
<table></table>
<span></span>
<div></div>
<h1></h1>

HTML学习笔记——文本格式化标签

文本格式化标签

b和strong

1
2
3
4
<!-- 都是行级标签(不会自动换行),都有加粗作用 -->
<!-- strong具有强调作用 -- >
<b>...</b>
<strong>...</strong>

i和em

1
2
3
4
<!-- 都可以使文字倾斜,都是行级标签。简单的倾斜效果用i标签就可以 -->
<!-- em还具有强调作用 -->
<i>...</i>
<em>...</em>

pre预格式文本

1
2
3
<!-- 预格式化文本,保留换行和宽度,但字号会小一号 -->
<!-- 块级标签,会独占一行 -->
<pre>...</pre>

small和big

1
2
3
4
5
6
7
8
<!-- 浏览器支持的最小字号为12px,要显示更小的字需另行处理。 -->

<!-- 都是行级标签 -- >
<!-- small会使文字小一号 -->
<small>...</small>

<!-- big会使文字大一号。big在html5中已淘汰但没删除,开发中尽量不要使用。 -->
<big>...</big>

sub和sup

1
2
3
4
5
<!-- sub为文本下标 -->
<sub>...</sub>

<!-- sup为文本上标 -->
<sup>...</sup>

如图所示

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} //回复内容

效果展示

效果

##感谢##

感谢大佬 摩尔 的帮助

HTML5 form标签method属性post与get的区别

post写法:

1
2
<form action="" method="post">  ...  </form>
<!-- action属性添加url -->

get写法:

1
2
3
<form action="" method="post"> ... </form>
<!-- action属性添加url -->

区别

get请求的数据会附在URL之后,如图
post把提交的数据放置在HTTP包的包体中,当提交数据需要的保密性高或数据量大时使用较多,传递数据隐匿

HTML5 input标签常使用类型

1
2
3
4
5
6
7
8
type="text" <!--文本输入框-->
type="password" <!--密码输入框-->
type="radio" <!--单选框-->
type="checkbox" <!--复选框-->
type="button" <!--普通按钮-->
type="submit" <!--提交按钮-->
type="reset" <!--重置按钮-->
type="file" <!--文件选择框-->

目前基本上都用 js 写交互,但作为一个初学者了解下还是有必要的。