<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
text-align: center;
}
.title {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h2 class="title" id="title"></h2>
<h3 id="distance-time"></h3>
<script>
const dom = document.getElementById("distance-time");
const title = document.getElementById("title");
title.innerText = `距离${new Date().getFullYear()}年春节还有`;
function getTime() {
const now = Date.now();
const end = new Date("2024-2-10 00:00:00");
console.log("🚀 ~ file: 春节倒计时.html:20 ~ end:", end.getTime());
const distance = Math.round((end - now) / 1000);
const sec = distance % 60;
const allMinus = (distance - sec) / 60;
const minus = allMinus % 60;
const allHour = (allMinus - minus) / 60;
const hour = allHour % 24;
const day = (allHour - hour) / 24;
dom.innerText = `距离春节还有：${day}天${hour}小时${minus}分钟${sec}秒`;
}
getTime();
setInterval(() => {
getTime();
}, 1000);
</script>
</body>
</html>
Javascript+css实现简单的春节倒计时
最新推荐文章于 2024-04-19 09:24:29 发布
本文展示了如何使用HTML和JavaScript在网页上创建一个动态的春节倒计时器，通过获取当前时间和指定的春节日期进行计算，实时更新显示距离春节剩余的时间.
扫一扫
3618
到【灌水乐园】发言
