網(wǎng)站已運(yùn)行時(shí)間動(dòng)態(tài)跳動(dòng)HTML代碼

[重要通告]如您遇疑難雜癥,本站支持知識(shí)付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!

這一段兒小代碼，適合博客、論壇、個(gè)人導(dǎo)航頁(yè)，加上它可以有裝逼的成分，樣式也還算可以，代碼如下：

正確食用方法如下：

直接把下面的代碼放入你網(wǎng)站的index.html/php的footer頁(yè)即可；

還有那個(gè)建站日期自己改一下，style可以自行修改，是這個(gè)文字背后的背景框有顏色、大小、陰影等等，script自己整個(gè)復(fù)制進(jìn)去即可！

網(wǎng)站已運(yùn)行時(shí)間動(dòng)態(tài)跳動(dòng)HTML代碼代碼如下：

<style>
#uptime {
position: fixed; /* 固定定位 */
bottom: 0; /* 距離底部0 */
left: 0; /* 距離左側(cè)0 */
width: 100%; /* 寬度為100% */
font-family: Arial, sans-serif;
font-size: 18px;
color: #333;
text-align: center; /* 文本居中 */
padding: 15px;
background-color: rgba(255, 255, 255, 0.2); /* 背景顏色透明 */
border-top: 1px solid #ddd; /* 上邊框 */
border-radius: 8px 8px 0 0; /* 上邊圓角 */
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 上方陰影 */
}

.highlight {
color: orange; /* 橙色 */
font-weight: bold; /* 粗體 */
}
</style>

<div id="uptime">Loading...</div>

<script>
// 網(wǎng)站建站日期
const launchDate = new Date('2006-06-06'); // 修改為您的建站日期

// 計(jì)算日期差異
const calculateUptime = (startDate, endDate) => {
const diffTime = endDate - startDate; // 時(shí)間差，單位毫秒
const diffSeconds = Math.floor(diffTime / 1000); // 秒數(shù)
const diffMinutes = Math.floor(diffSeconds / 60); // 分鐘數(shù)
const diffHours = Math.floor(diffMinutes / 60); // 小時(shí)數(shù)
const diffDays = Math.floor(diffHours / 24); // 天數(shù)
const hours = diffHours % 24; // 當(dāng)前天的小時(shí)數(shù)
const minutes = diffMinutes % 60; // 當(dāng)前小時(shí)的分鐘數(shù)
const seconds = diffSeconds % 60; // 當(dāng)前分鐘的秒數(shù)

return { diffDays, hours, minutes, seconds };
};

// 更新顯示的時(shí)間
const updateUptime = () => {
const currentDate = new Date();
const { diffDays, hours, minutes, seconds } = calculateUptime(launchDate, currentDate);
document.getElementById('uptime').innerHTML =
`網(wǎng)站已運(yùn)行 <span class="highlight">${diffDays}</span> 天 <span class="highlight">${hours}</span> 小時(shí) <span class="highlight">${minutes}</span> 分鐘 <span class="highlight">${seconds}</span> 秒`;
};

// 每秒更新一次顯示的時(shí)間
setInterval(updateUptime, 1000);

// 初始更新
updateUptime();
</script>

按照以上操作放到自己響應(yīng)的位置，就絲滑了~~~

問題未解決？付費(fèi)解決問題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信

所寫所說，是心之所感，思之所悟，行之所得；文當(dāng)無(wú)敷衍，落筆求簡(jiǎn)潔。 以所舍，求所獲；有所依，方所成！