做網(wǎng)站服務(wù)怎么賺錢2022最近比較火的營(yíng)銷事件
- 💂 個(gè)人網(wǎng)站:【工具大全】【游戲大全】【神級(jí)源碼資源網(wǎng)】
- 🤟 前端學(xué)習(xí)課程：👉【28個(gè)案例趣學(xué)前端】【400個(gè)JS面試題】
- 💅 尋找學(xué)習(xí)交流、摸魚劃水的小伙伴，請(qǐng)點(diǎn)擊【摸魚學(xué)習(xí)交流群】
這個(gè)項(xiàng)目使用HTML、CSS和JavaScript來(lái)制作一個(gè)簡(jiǎn)單但有趣的中秋節(jié)倒計(jì)時(shí)網(wǎng)頁(yè)。網(wǎng)頁(yè)將顯示距離中秋節(jié)還有多少天、小時(shí)、分鐘和秒，并添加一些中秋節(jié)相關(guān)的圖像和祝福語(yǔ)。
在線預(yù)覽地址：https://haiyong.site/demo/zhongqiu/
1. HTML 結(jié)構(gòu)
首先，創(chuàng)建一個(gè)HTML文件，命名為 index.html，并在其中添加以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中秋節(jié)倒計(jì)時(shí)</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="countdown-container"><h1>中秋節(jié)倒計(jì)時(shí)</h1><div id="countdown"></div><div class="greetings"><img src="moon.png" alt="月亮圖像"><p>祝你中秋節(jié)快樂(lè)！</p></div></div><script src="script.js"></script>
</body>
</html>
2. CSS 樣式
創(chuàng)建一個(gè)名為 style.css 的 CSS 文件，并添加樣式來(lái)美化頁(yè)面，代碼如下：
body {font-family: Arial, sans-serif;background-color: #f2f2f2;text-align: center;
}.countdown-container {background-color: #fff;border-radius: 10px;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);margin: 50px auto;max-width: 400px;
}h1 {font-size: 24px;margin-bottom: 10px;
}#greetings {margin-top: 20px;
}img {width: 128px;height: 96px;
}p {font-size: 18px;font-weight: bold;
}
3. JavaScript 倒計(jì)時(shí)
創(chuàng)建一個(gè)名為 script.js 的 JavaScript 文件，來(lái)實(shí)現(xiàn)倒計(jì)時(shí)功能。
// 中秋節(jié)日期（年/月/日）
const midAutumnDate = new Date('2023-09-29T00:00:00');function updateCountdown() {// 獲取當(dāng)前時(shí)間const now = new Date();// 計(jì)算距離中秋節(jié)的時(shí)間差（毫秒）const timeRemaining = midAutumnDate - now;// 計(jì)算天數(shù)、小時(shí)、分鐘和秒數(shù)const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);// 更新頁(yè)面上的倒計(jì)時(shí)元素document.getElementById('countdown').innerHTML = `${days} 天 ${hours} 小時(shí) ${minutes} 分鐘 ${seconds} 秒`;
}// 每秒調(diào)用一次updateCountdown函數(shù)，以實(shí)時(shí)更新倒計(jì)時(shí)
setInterval(updateCountdown, 1000);// 初次加載頁(yè)面時(shí)立即更新倒計(jì)時(shí)
updateCountdown();
這段JavaScript代碼執(zhí)行以下操作：
-
創(chuàng)建一個(gè)JavaScript日期對(duì)象
midAutumnDate，表示中秋節(jié)的日期和時(shí)間（今年中秋節(jié)是2023年9月29日）。 -
定義一個(gè)名為
updateCountdown的函數(shù)，用于計(jì)算并更新倒計(jì)時(shí)。它執(zhí)行以下步驟：- 獲取當(dāng)前時(shí)間，存儲(chǔ)在
now變量中。 - 計(jì)算距離中秋節(jié)的時(shí)間差（以毫秒為單位），存儲(chǔ)在
timeRemaining變量中。 - 使用數(shù)學(xué)函數(shù)計(jì)算剩余的天數(shù)、小時(shí)、分鐘和秒數(shù)。
- 更新網(wǎng)頁(yè)上的倒計(jì)時(shí)元素，將計(jì)算得到的時(shí)間顯示在頁(yè)面上。
- 獲取當(dāng)前時(shí)間，存儲(chǔ)在
-
使用
setInterval函數(shù)每秒調(diào)用一次updateCountdown函數(shù)，以實(shí)時(shí)更新倒計(jì)時(shí)。 -
在頁(yè)面加載時(shí)，立即調(diào)用
updateCountdown函數(shù)，以確保初次加載時(shí)顯示正確的倒計(jì)時(shí)。
4. 圖像
我們需要一張?jiān)铝恋膱D像，將其命名為 moon.png，并放在項(xiàng)目目錄下。
5. 運(yùn)行
將以上三個(gè)文件放在同一個(gè)目錄下，然后打開 midAutumnCountdown.html 文件，我們可以看到一個(gè)漂亮的中秋節(jié)倒計(jì)時(shí)頁(yè)面，頁(yè)面上會(huì)顯示距離中秋節(jié)的時(shí)間，以及中秋節(jié)的祝福語(yǔ)和月亮圖像。
這個(gè)簡(jiǎn)單的項(xiàng)目展示了如何使用HTML、CSS和JavaScript來(lái)創(chuàng)建一個(gè)與中秋節(jié)相關(guān)的網(wǎng)頁(yè)，讓我們可以隨時(shí)了解距離中秋節(jié)還有多少時(shí)間。大家可以根據(jù)自己的創(chuàng)意和技能進(jìn)一步擴(kuò)展這個(gè)項(xiàng)目，添加更多功能和效果，以增加中秋節(jié)的樂(lè)趣。最后，提前祝大家中秋節(jié)快樂(lè)！