100行Html5+CSS3+JS代码实现元旦倒计时界面

margin: 0;

}

.big-text{

color: rgb(255, 215, 0);

font-size: 3rem;

font-weight: bold;

line-height: 0.5;

margin: 3rem;

}

h1{

color: gold;

font-size: 3rem;

margin-top: 3rem;

}

.countdown-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.countdel {

color: black;

font-size: 2rem;

font-weight: bold;

text-align: center;

}

Html代码：

2022新年倒计时

0

天

0

时

0

分

0

秒

JS代码：

const daysEl = document.getElementById(‘days’)

const hoursEl = document.getElementById(‘hours’)

const minutesEl = document.getElementById(‘minutes’)

const secondsEl = document.getElementById(‘seconds’)

const x = new Date().getFullYear()

const y = x+1;

const newYear = new Date(y,0,1,0,0,0,0)

function countdown() {

const newYearsDate = new Date(newYear);

const currentDate = new Date();

const totalSeconds = (newYearsDate - currentDate) / 1000;

const days = Math.floor(totalSeconds / 3600 / 24);

const hours = Math.floor(totalSeconds / 3600) % 24;

const minutes = Math.floor(totalSeconds / 60) % 60;

const seconds = Math.floor(totalSeconds % 60);

daysEl.innerHTML = days;

hoursEl.innerHTML = formatTime(hours);

minutesEl.innerHTML = formatTime(minutes);

secondsEl.innerHTML = formatTime(seconds);

}

function formatTime(time){

return time < 10 ? (0${time}) : time;

}

countdown();

setInterval(countdown,1000)

附录：

零基础必看的Html5+Css3+移动端前端教程（一）

零基础必看的Html5+Css3+移动端前端教程(二)")

零基础必看的Html5+Css3+移动端前端教程(三)")

零基础必看的Html5+Css3+移动端前端教程(四)“)
零基础必看的Html5+Css3+移动端前端教程(五)”)