本网站是本人的个人博客网站海外站,国内网站为https://suyihang15.com,本网站主要面对海外用户

如何在自己的网站上添加一个计数器

注:这是一个添加计数器的代码解释的代码

1、首先先写一个容器给他框起来

<!-- 页面用于展示运行时长的容器 -->
<div class="runtime" style="text-align:center;padding:15px;font-size:14px;color:#666;"></div>

2、做一个开始,标准的php

<script>

3. 定义网站上线固定起始时间:2025-10-27 零点
new Date(…).getTime() 将日期转为时间戳(毫秒,从1970-01-0至今)

const startTime = new Date("2025-10-27 00:00:00").getTime();

4. 更新运行时长的核心函数

function updateTime() {

5、获取当前系统时间戳(当前时刻毫秒数)

let now = Date.now();

6、总相差毫秒 ÷ 1000 = 相差总秒数,向下取整

let totalSec = Math.floor((now - startTime) / 1000);

7、一天总秒数:24*60*60=86400
计算完整天数

let day = Math.floor(totalSec / 86400);

8、剩余秒数取模一天,再换算小时

let hour = Math.floor((totalSec % 86400) / 3600);

9、剩余秒数取模一小时,换算分钟

let minute = Math.floor((totalSec % 3600) / 60);

10、最后剩下不足1分钟的就是秒数

let second = totalSec % 60;

11、选中class为runtime的div,拼接文字写入页面

 document.querySelector('.runtime').innerText =
        `网站自2025年10月27日来已稳定运行:${day}天 ${hour}时 ${minute}分 ${second}秒`;
}

12、页面加载后立刻执行一次,不用等1秒才显示数字

updateTime();

13、定时器:每1000毫秒(1秒)执行一次updateTime,实现秒跳动

setInterval(updateTime, 1000);

14、结束

</script>

15、完整的代码

如果要使用,直接改一下内容,粘贴到footer.php文件里就行了

<div class="runtime" style="text-align:center;padding:15px;font-size:14px;color:#666;"></div>

<script>
const startTime = new Date("2025-10-27 00:00:00").getTime();

function updateTime() {
    let now = Date.now();
    let totalSec = Math.floor((now - startTime) / 1000);
    let day = Math.floor(totalSec / 86400);
    let hour = Math.floor((totalSec % 86400) / 3600);
    let minute = Math.floor((totalSec % 3600) / 60);
    let second = totalSec % 60;
    document.querySelector('.runtime').innerText =
        `网站自2025年10月27日来已稳定运行:${day}天 ${hour}时 ${minute}分 ${second}秒`;
}
updateTime();
setInterval(updateTime, 1000);
</script>

效果展示

总结:这只是一个很基础的实现代码,请自行更改css这些文件。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

阿里云云服务器ECS - 特惠选购

精选服务器规格

入门服务器

入门型实例

适合个人博客、小型网站、学习测试,2核2G,带宽可选。
¥99.00 /年起
查看详情
企业基础服务器

企业基础实例

4核8G配置,中小型业务、商城、小程序后端,稳定高性能。
¥399.00 /年起
查看详情
高性能服务器

高性能计算实例

高CPU大内存,数据库、高并发业务场景,支撑业务高峰期。
¥899.00 /年起
查看详情

产品核心优势

⇄

弹性伸缩

随时升降配置,业务涨降灵活调整,避免资源浪费

🛡

安全防护

DDoS基础防护,防火墙,保障服务器业务安全

✓

高可用稳定

多可用区,高服务可用性,降低故障风险

⚙

简单运维

控制台可视化操作,支持Windows/Linux多种系统