博客主页
添加一个不一样的“网站存活时间”
添加一个不一样的“网站存活时间”

Author:

CC-star

©

Wordage:

共计 3522 字

needs:

约 1 分钟

Popular:

120 ℃

Created:

:本文最后更新于2023年11月24日,已经过了513天没有更新,若内容或图片失效,请留言反馈
目 录

示例

64e5f6a72e585.png


代码

JS代码【时间计算】

    // 运行时间 by.灵心云 ->cloudlx.top
//运行时间
window.setTimeout("siteTime()", 1000);

function siteTime() {
    window.setTimeout("siteTime()", 1000);

    const X = new Date("11/21/2022 5:20:00");
    const Y = new Date();
    const T = (Y.getTime() - X.getTime());
    const M = 24 * 60 * 60 * 1000;
    const a = T / M;
    const A = Math.floor(a);
    const b = (a - A) * 24;
    const B = Math.floor(b);
    const c = (b - B) * 60;
    const C = Math.floor((b - B) * 60);
    const D = Math.floor((c - C) * 60);

         document.getElementById("sitetime").innerHTML = A + " 天 " + B + " 小时 " + C + " 分钟 " + D + " 秒";
}

CSS美化代码【流水渐变】

此处内容,需回复之后可见


不一样的title

     .custom-tooltip {
                                        position: relative;
                                        display: inline-block;
                                    }

                                    .custom-tooltip::before {
                                        content: "存活时间";
                                        position: absolute;
                                        bottom: 120%; 
                                        left: 50%;
                                        transform: translateX(-50%);
                                        padding: 5px 10px;
                                        background-color: gray;
                                        color: white;
                                        border-radius: 20px; 
                                        visibility: hidden;
                                        opacity: 0;
                                        transition: opacity 0.3s, visibility 0.3s;
                                        font-weight: bold; 
                                        font-size: 14px; 
                                        text-align: center; 
                                        white-space: nowrap; 
                                    }

                                    .custom-tooltip:hover::before {
                                        visibility: visible;
                                        opacity: 1;
                                    }
文章二维码
添加一个不一样的“网站存活时间”
共计 0 条评论,点此发表评论
博客主页 数据猫 漫游于星空的数据猫
技术支持 CC 数据猫. 2025
打赏图
打赏博主
欢迎
欢迎
欢迎访问数据猫
搜 索
足 迹
分 类
  • 简文
  • 技术
  • 娱乐