網站已運行時間動態跳動HTML代碼

[重要通告]如您遇疑難雜癥,本站支持知識付費業務,掃右邊二維碼加博主微信,可節省您寶貴時間哦!

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

正確食用方法如下：

直接把下面的代碼放入你網站的index.html/php的footer頁即可；

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

網站已運行時間動態跳動HTML代碼代碼如下：

<style>
#uptime {
position: fixed; /* 固定定位 */
bottom: 0; /* 距離底部0 */
left: 0; /* 距離左側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>
// 網站建站日期
const launchDate = new Date('2006-06-06'); // 修改為您的建站日期

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

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

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

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

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

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