网站已运行时间动态跳动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>

按照以上操作放到自己响应的位置，就丝滑了~~~

问题未解决？付费解决问题加Q或微信 2589053300 (即Q号又微信号)右上方扫一扫可加博主微信

所写所说，是心之所感，思之所悟，行之所得；文当无敷衍，落笔求简洁。 以所舍，求所获；有所依，方所成！