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

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

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

正確食用方法如下:

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

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

網(wǎng)站已運(yùn)行時間動態(tài)跳動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'); // 修改為您的建站日期

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

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

// 更新顯示的時間
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> 小時 <span class="highlight">${minutes}</span> 分鐘 <span class="highlight">${seconds}</span> 秒`;
};

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

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

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

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

所寫所說,是心之所感,思之所悟,行之所得;文當(dāng)無敷衍,落筆求簡潔。 以所舍,求所獲;有所依,方所成!

支付寶贊助
微信贊助

免責(zé)聲明,若由于商用引起版權(quán)糾紛,一切責(zé)任均由使用者承擔(dān)。

您必須遵守我們的協(xié)議,如您下載該資源,行為將被視為對《免責(zé)聲明》全部內(nèi)容的認(rèn)可->聯(lián)系老梁投訴資源
LaoLiang.Net部分資源來自互聯(lián)網(wǎng)收集,僅供用于學(xué)習(xí)和交流,請勿用于商業(yè)用途。如有侵權(quán)、不妥之處,請聯(lián)系站長并出示版權(quán)證明以便刪除。 敬請諒解! 侵權(quán)刪帖/違法舉報/投稿等事物聯(lián)系郵箱:service@laoliang.net
意在交流學(xué)習(xí),歡迎贊賞評論,如有謬誤,請聯(lián)系指正;轉(zhuǎn)載請注明出處: » 網(wǎng)站已運(yùn)行時間動態(tài)跳動HTML代碼

發(fā)表回復(fù)

本站承接,網(wǎng)站推廣(SEM,SEO);軟件安裝與調(diào)試;服務(wù)器或網(wǎng)絡(luò)推薦及配置;APP開發(fā)與維護(hù);網(wǎng)站開發(fā)修改及維護(hù); 各財務(wù)軟件安裝調(diào)試及注冊服務(wù)(金蝶,用友,管家婆,速達(dá),星宇等);同時也有客戶管理系統(tǒng),人力資源,超市POS,醫(yī)藥管理等;

立即查看 了解詳情