2020-07-09更新

修复倒计时归零后出现负数的bug

自动切换至下一年日期

效果展示

前言

在B站上找视频学习的，勉强搞出来了，写下此篇文章作为笔记，也希望有更多感兴趣的人能够有所收获.

(萌新练习，大佬勿喷 (滑稽))

代码

HTML代码

index.html

Countdown to NCEE

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);

CSS代码

style.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';

}

项目演示