为网站底部添加一个运行时间JS代码

前言:

将下面代码加到footer的合适位置自行调整


代码:

<!-- 开站时间开始 -->       
             <a id="timeDate">载入天数...</a><a id="times">载入时分秒...</a> <script language="javascript"> 
    var now = new Date();
    function createtime(){
        var grt= new Date("04/17/2022 00:00:00");/*---这里是网站的启用时间--*/
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;}
        minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "稳定运行"+dnum+"天";
        document.getElementById("times").innerHTML = hnum + "小时" + mnum + "分" + snum + "秒";
    }
    setInterval("createtime()",250); 
</script> 
<!-- 开站时间结束 -->

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,以下是一个示例的 JavaScript 代码,可以实现一个统计页面已运行多长时间的功能: HTML 代码: ``` <footer> <div class="liquid"></div> <div id="running-time">页面已运行 <span id="time-counter">0</span> 秒</div> </footer> ``` CSS 代码: ``` footer { position: relative; height: 100px; /* 设置页脚高度 */ } .liquid { position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; /* 设置液体高度 */ background-color: #0077ff; /* 设置液体颜色 */ animation: wave 2s infinite linear; transform-origin: center bottom; } #running-time { position: absolute; bottom: 10px; right: 10px; color: #ffffff; /* 设置文字颜色 */ font-size: 14px; /* 设置文字大小 */ } @keyframes wave { 0% { transform: translateX(0) translateZ(0) scaleY(1); } 50% { transform: translateX(50%) translateZ(0) scaleY(0.6); } 100% { transform: translateX(100%) translateZ(0) scaleY(1); } } ``` JavaScript 代码: ``` var timeCounter = document.getElementById("time-counter"); var startTime = new Date().getTime(); // 获取页面打开的开始时间 function updateTime() { var currentTime = new Date().getTime(); var elapsedTime = Math.floor((currentTime - startTime) / 1000); // 计算已经过去的秒数 timeCounter.innerHTML = elapsedTime; // 更新页面上的计时器 } setInterval(updateTime, 1000); // 每隔1秒更新一次计时器 ``` 解释: - `footer` 元素用于包裹整个页脚,设置了高度和定位。 - `liquid` 元素用于表示液体,设置了宽度和高度,并通过 `position` 属性设置在页脚底部,通过 `background-color` 属性设置颜色。 - `#running-time` 元素用于展示页面已经运行时间,通过 `position` 属性设置在页脚右下角,通过 `color` 和 `font-size` 属性设置文字颜色和大小。 - JavaScript 代码中,获取页面打开的开始时间,并通过 `setInterval` 函数每隔1秒更新一次计时器。 这个示例只是一个基本的实现,您可以根据自己的需求进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值