js教程

网站已运行时间JS代码,分秒实时动态跳动

我的站长站 2024-08-16 人阅读

网站运行时间js代码

<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('2024-08-14'); // 修改为您的建站日期
    // 计算日期差异
    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>

使用方法

直接把上面的代码放入你网站的index.html/php的footer页脚

还有那个建站日期自己改一下

style可以自行修改是这个文字背后的背景框有颜色、大小、阴影等等

script自己整个复制进去就好了


相关推荐
  • 网站运行时间
  • JS时间
  • 网站已运行时间JS代码,分秒实时动态跳动

    网站运行时间JS代码<style> #uptime { position: fixed; /* 固定定位 */ bottom: 0; /* 距离底部0 */ left: 0; /* 距离左侧0 */ width: 100%; /* 宽度为100% */ font-family: Arial, sans-serif; fon...

    js教程 8 2个月前
  • JS本站已运行时间统计代码

    JS本站已运行时间统计代码<SCRIPT language=javascript>document.write("");function show_date_time(){window.setTimeout("show_date_time()", 1000);BirthDay=new Date("11-30-2011");//改成你的论坛建站的日期月/日/年today=new Date();timeold=...

    js教程 156 4年前
  • JS本站已运行时间统计代码

    JS本站已运行时间统计代码<SCRIPT language=javascript>document.write("");function show_date_time(){window.setTimeout("show_date_time()", 1000);BirthDay=new Date("11-30-2011");//改成你的论坛建站的日期月/日/年today=new Date();timeold=...

    js教程 156 4年前
  • JS年月日星期早中午时间代码

    JS年月日星期早中午时间代码,我的站长站自用时间代码,完美简单。var day=""; var month=""; var ampm=""; var ampmhour=""; var myweekday=""; var year=""; var hh;var wh;mydate=new Date(); myweekday=mydate.getDay(); mymonth=mydate.g...

    js教程 92 4年前
  • javascript获取当前时间方法汇总

    1. Date()方法Date() 函数用于创建一个包含当前日期和时间的新 Date 对象。const now = new Date();console.log(now);输出:Wed Sep 15 2021 15:21:45 GMT+0800 (中国标准时间)2. getTime()方法getTime() 函数返回从 1970 年 1 月 1 日到现在的毫秒数...

    js教程 76 1年前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前