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

CairBin

2020 年 07 月 19 日

690 次浏览

暂无评论

3029字数

HTML/CSS

2020-07-09更新

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

起因

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

代码

html代码

<!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代码

@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';
}