前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >如何给网站添加记录当前站点运行了多长时间

如何给网站添加记录当前站点运行了多长时间

作者头像
itclanCoder
发布于 2023-11-08 09:08:34
发布于 2023-11-08 09:08:34
49100
代码可运行
举报
文章被收录于专栏:itclanCoderitclanCoder
运行总次数:0
代码可运行

前言

我们平时在闲逛一些网站的时候,会发现很多网站底部都记录了当前网站

记录了当前站点运行了多长时间,当用户看到时,会增强用户的信任感

网站运营的时间越长,也就意味着网站越稳定,越值得信赖

原生JS实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span id="runtime_span" style="color: #9b51e0;font-weight:bold"></span>

<script type="text/javascript">

function show_runtime(){

  window.setTimeout("show_runtime()",1000);

  X = new Date("01/06/2016 5:22:00");

  Y = new Date();

  T = (Y.getTime()-X.getTime());

  M = 24*60*60*1000;

  a = T/M;

  A = Math.floor(a);

  b = (a-A)*24;

  B = Math.floor(b);

  c = (b-B)*60;

  C = Math.floor((b-B)*60);

  D = Math.floor((c-C)*60);

  runtime_span.innerHTML="本站已经稳定运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"

}

show_runtime();

</script>

核心的原理就是,获取当前的时间减去设置初始时的时间,将时间转化成年,天,小时,分,秒,然后通过js中的innerHTMLDOM属性将内容插入到页面中

Vue版本实现

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>

    <div class="add-website-long-time">

      <span>{{runTimeText}}</span>

    </div>

  </template>

  <script>

  export default {

      name: 'addLongTime',

      data() {

          return {

              runTimeText: '',

          }

      },

      mounted() {

         this.timer = setInterval(this.runTime,1000);

      },

      methods: {

          runTime() {

            let X = new Date("01/06/2020 5:22:00"); // 设置的初始时间

            let Y = new Date();  // 当前时间

            let T = (Y.getTime()-X.getTime());

            let M =24*60*60*1000;

            let a = T/M;

            let A = Math.floor(a);

            let b = (a-A)*24;

            let B = Math.floor(b);

            let c = (b-B)*60;

            let C = Math.floor((b-B)*60);

            let D = Math.floor((c-C)*60);

            this.runTimeText = "本站已经稳定运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"

         }

      },

      beforeDestroy() {

        clearInterval(this.timer)

      }

  }

  </script>

  <style>

  .add-website-long-time {
      text-align: center;
  }

  </style>
</script>

只要会原生JS,那么写Vue版本或React都是语法上差异,核心的逻辑依旧是没有变的

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-11-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 itclanCoder 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
网站如何加入显示运行时间
世间万物皆苦,你明目张胆的偏爱就是救赎。 网站加入运行时间精确到秒 把下面代码加到你需要的地方,很简单的,我还是比较喜欢这样的个性代码的 <span id="runtime_span"></span> <script type="text/javascript"> function show_runtime() {window.setTimeout("show_runtime()",1000); X=new Date("10/16/2017 5:22:00"); Y=new Date(); T=(Y.
白黎
2023/03/16
7530
网站如何加入显示运行时间
网站底部添加网站运行时间代码,自动计算精确到秒
本文来源于星泽V社,未经允许禁止转载,原文链接:https://www.52xzv.cn/archives/1340.html
星泽V社
2022/10/27
1.5K0
网站底部添加网站运行时间代码,自动计算精确到秒
为Typecho博客添加加载时间和网站运行时间
1、添加网站运行时间 在footer.php中的上面添加 function show_runtime() {window.setTimeout("show_runtime()",1000);X=new Date("1/01/2021 00:00:00"); //初始建站时间修改此处 Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000; a=T/M;A=Math.floor(a);b=(a-A)*24;B
云计算小黑
2022/12/28
6480
为Typecho博客添加加载时间和网站运行时间
WordPress标题文章字体大小调整
主题的标题字体太大,试了很多方法,标题字体大小始终调整不了。网上也找了很多方法,均不灵验。最终于找到一段CSS代码,添加到主题自定义,设置CSS选项里,确定后字体大小,再根据自己网站适量自己调整。
zairun
2022/10/31
1.3K0
文章底部夹缝中生存代码
输出位置 夹缝中生存:<span id="runtime_span"></span>
Qicloud
2022/01/27
3290
Docker - Wordpress
也可以只指定某些域名可以访问。注意把括号内的域名改成你自己需要绑定的域名。这样就可以设置成你添加的这几个域名能正常访问。而其他未添加的域名则无法访问。
断痕
2021/01/21
7170
Docker - Wordpress
7b2美化-网站底部添加运行时间
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
5950
7b2美化-网站底部添加运行时间
给网站添加本站运行天数
效果 站点 在主题配置里头黏贴 <div style="font-size: 0.85rem"> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script src="/runtime.js"></script> JS代码 你需要新建一个runtime.js的文件(在网站根目录),并且修改起始日期。 /** 修改日期 2021/12/12 **/ /** 作者 张凯强,大白熊修改 **/ /** 网站 bl
大白熊
2021/12/23
9170
给网站添加本站运行天数
设置网站运行时间
老猫-Leo
2023/12/11
2390
WordPress底部添加运行时间
具体展示就像本博客页脚下所显示的一样.我们只需要将代码放在主题下的footer.php的合适位置就可以了.
桑先生
2019/12/17
1.3K0
为主题用pugjs编写的hexo博客添加网站运行时间
然后把上述脚本添加到主题的layout/_partials/footer/footer.pug文件中(不同主题可能文件不一样,请自行参考)即可在网页底部显示网站运行时间了OvO,不过要注意修改一下var grt= new Date("08/13/2018 00:00:00");中的起始时间哦!
impressionyang
2020/08/26
8510
在网页中插入运行时间统计的方法
云萌工作室
2024/12/27
820
Typecho Cuteen 主题美化
前往 https://www.alapi.cn/ 注册一个账号 复制自己的Token替换下边的 你的密钥内容
氢云
2023/03/31
2.1K0
Typecho Cuteen 主题美化
显示网站运行时间
文章摘自小峰博客,经常逛网站,细心的话会发现,有些网站底部会显示本站稳定运行XX年XX天,甚至后面还显示XX时、XX秒
herve
2018/09/20
4K0
显示网站运行时间
「  【WEB】给你的网站增加运行时间代码  」
时候觉得添加一些东西还是挺好玩的,比如在网站底部加一个运行时间代码还是挺好玩的 <center> 今天是:<span><script language=Javascript type=text/Javascript> var day=""; var month=""; var ampm=""; var ampmhour=""; var myweekday=""; var year=""; mydate=new Date(); myweekday=mydate.getDay(); mymo
青益
2023/01/03
9370
前端技术前沿8
实现倒计时(天数、时、分、秒) parseInt() 函数可解析一个字符串,并返回一个整数。 <body onload="leftTimer()"> <h2>剩余时间:</h2> <div id="timer"></div> </body> <script language="javascript" type="text/javascript"> function leftTimer(year,month,day,hour,minute,second){ var leftTime =
达达前端
2019/07/03
5.9K0
前端技术前沿8
网站安全运行计时JS代码
截止至现在本站已安全运行3天了,css只是变颜色的可有可无,js自己找地方丢或一起放主题页脚文件foot.php即可!
叮当叮
2020/04/20
3.4K0
Typecho博客网站底部添加网站已运行时间教程
样式一: 1. 将代码放入 functions.php 一般在主题根目录:网站 /usr/themes/ 主题 修改一下你自己的网站时间 // 设置时区 date_default_timezone_set('Asia/Shanghai'); /** * 秒转时间,格式 年 月 日 时 分 秒 * */ function getBuildTime() { // 在下面按格式输入本站创建的时间 $site_create
季春二九
2023/03/22
7300
WordPress 服务器运行信息 变色
特殊说明: 以上文章,均是我实际操作,写出来的笔记资料,不会盗用别人文章!烦请各位,请勿直接盗用!转载记得标注来源!
收心
2022/01/19
5820
Fluid -4- 页脚增加网站运行时长
需要说明的是,如果将这个js 文件直接放在 hexo 目录的source 文件夹中,会报错无法渲染站点,此处有两种解决方案
为为为什么
2022/08/06
7150
Fluid -4- 页脚增加网站运行时长
相关推荐
网站如何加入显示运行时间
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验