Handsome 博客主题美化记录

/* 后台路径(相对路径) /
define(' **TYPECHO_ADMIN_DIR** ', '/admin/');

alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_unicode_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_unicode_ci;

$db->addServer(array (
'host'      =>  localhost,
'user'      =>  'root',
'password'  =>  'root',
'charset'   =>  'utf8mb4', //修改这一行
'port'      =>  3306,
'database'  =>  ''
), Typecho_Db::READ | Typecho_Db::WRITE);

/* 首页标题文字居中 */
.m-t-none.text-ellipsis.index-post-title.text-title {
    text-align: center !important;
}

/* 文章标题居中 */
header.bg-light.lter.wrapper-md {
    text-align: center;
}

/* 博客名称&logo扫光效果 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;
}

.navbar-brand:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 200px;
    height: 15px;
    background-color: rgba(255,255,255,.5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 6s ease-in 0s infinite;
    -o-animation: searchLights 6s ease-in 0s infinite;
    animation: searchLights 6s ease-in 0s infinite;
}

@-moz-keyframes searchLights {
    50% {
        left: -100px;
        top: 0;
    }

    65% {
        left: 120px;
        top: 100px;
    }
}

@keyframes searchLights {
    40% {
        left: -100px;
        top: 0;
    }

    60% {
        left: 120px;
        top: 100px;
    }

    80% {
        left: -100px;
        top: 0px;
    }
}

/* 划过头像放大并旋转 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}

.img-circle:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

/* 首页文章图片获取焦点放大 */
.item-thumb {
    cursor: pointer;
    transition: all 0.6s;
}

.item-thumb:hover {
    transform: scale(1.05);
}

.item-thumb-small {
    cursor: pointer;
    transition: all 0.6s;
}

.item-thumb-small:hover {
    transform: scale(1.05);
}

/* 时光机圆形头像 */
.img-square {
    border-radius: 50%;
}

.list-group-item .thumb-sm .img-square {
    border-radius: 5px;
}

/* 美化网站右侧滚动条样式 */
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px
}

/* 定义滚动条轨道 */ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

/* 定义滑块 内阴影+圆角 */ 
::-webkit-scrollbar-thumb {
    background-color: #949494;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,
    transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}

/* 首页文章版式阴影颜色 */
.panel {
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel:hover {
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small {
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.panel-small:hover {
    box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}

/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up {
    color: #ff0000;
}

.sidebar-icon svg.feather.feather-message-square {
    color: #495dc3;
}

.sidebar-icon svg.feather.feather-gift {
    color: #52DE97;
}

#post-content pre code {
    display: block;
    overflow-x: auto;
    position: relative;
    margin: 0;
    padding-left: 50px;
}

pre code {
    position: relative;
    display: block;
    overflow-x: auto;
    margin: 4.4px 0.px .4px 1px;
    padding: 0;
    max-height: 500px;
    padding-left: 3.5em
}

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

/* 词云等距美化 */
#tag_cloud-2 a {
    border-radius: 5px;
    width: 32%;
}

/* 首页文章列表悬停上浮 */
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

/* 赞赏按钮跳动 */
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* 评论边框 */
.comment-parent {
    margin: 20px;
    padding: 20px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,.3);
}

/* 粗斜体上色 */
strong {
    color: #f26522;
}

em {
    font-style: normal;
    color: #fcaf17;
}

<!--开启黑白模式-->
html {
    -webkit-filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

html {
    filter: progidXImageTransform.Microsoft.BasicImage(grayscale=1);
}

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
<!--黑白模式结束-->

<!--开启黑白模式-->
<style type="text/css">html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
} </style>
<!--黑白模式结束-->

<!--开启黑白模式-->
<style>html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: progid：lolXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter: none;
} </style>
<!--黑白模式结束-->

<!--开启黑白模式-->
<style>html {
    -webkit-filter: grayscale(100%);
}</style>
<!--黑白模式结束-->

/* 首页文章版式圆角化 */
.panel {
    border: none;
    border-radius: 15px;
}

.panel-small {
    border: none;
    border-radius: 15px;
}

.item-thumb {
    border-radius: 15px;
}

/* 文章页H1/H2标签背景颜色修改 */
#post-content h1, #post-content h2 {
    background: linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}

/* 手机端屏蔽热门文章和标签云 */
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

<!-- 网页文字禁止复制 -->
<script language="Javascript">
    document.oncontextmenu = new Function("event.returnValue=false");
    document.onselectstart = new Function("event.returnValue=false");
</script>

/* 复制成功提示代码开始 */
kaygb_copy();
function kaygb_copy() {
    $(document).ready(function() {
        $("body").bind('copy',
        function(e) {
            hellolayer()
        })
    });
    var sitesurl = window.location.href;
    function hellolayer() {
        $.message({
            message: "尊重原创，转载请注明出处！<br> 本文作者：Kared<br>原文链接：" + sitesurl,
            title: "复制成功",
            type: "warning",
            autoHide: !1,
            time: "5000"
        })
    }
}
/* 复制成功提示代码结束 */

/* 复制自带版权代码开始 */
document.body.addEventListener('copy',
function(e) {
    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {
        setClipboardText(e);
        notie({
            type: 'info',
            text: '商业转载请联系作者获得授权，非商业转载请注明出处，谢谢合作。',
            autoHide: true
        })
    }
});
function setClipboardText(event) {
    var clipboardData = event.clipboardData || window.clipboardData;
    if (clipboardData) {
        event.preventDefault();

        var htmlData = '' + '著作权归作者所有。<br>' + '商业转载请联系作者获得授权，非商业转载请注明出处！<br>' 
                     + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！<br>' + '作者：Kared<br>' 
                     + '链接：' + window.location.href + '<br>' + '来源：https://www.huarzone.com/<br><br>'
                     + window.getSelection().toString();
        var textData = '' + '著作权归作者所有。\n' + '商业转载请联系作者获得授权，非商业转载请注明出处！\n' 
                     + '本博转载文章版权及解释权归原作者所有，博主只是勤劳的搬运工！\n' + '作者：Kared\n' 
                     + '链接：' + window.location.href + '\n' + '来源：https://www.huarzone.com/\n\n' 
                     + window.getSelection().toString();

        clipboardData.setData('text/html', htmlData);
        clipboardData.setData('text/plain', textData);
    }
}
/* 复制自带版权代码结束 */

/* 网站加载完成提示代码开始 */
function kaygb_referrer() {
    var kaygb_referrer = document.referrer;
    if (kaygb_referrer != "") {
        return "感谢您的访问，来自：<br>" + document.referrer;
    } else {
        return "";
    }
}
$.message({
    message: "如果本站内容对您有帮助，欢迎收藏！<br >" + kaygb_referrer(),
    title: "网站加载完成",
    type: "success",
    autoHide: !1,
    time: "3000"
})
/* 网站加载完成提示代码结束 */

/* 左侧图标颜色and彩色标签云 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag = >{
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info = >{
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if (length > 0) {
        document.getElementById("comment").focus() document.getElementById("comment").value += '\n' + a + new Date
    } else {
        document.getElementById("comment").focus() document.getElementById("comment").value += a + new Date
    }
}
let leftHeader = document.querySelectorAll("span.nav-icon>svg,span.nav-icon>i");
let leftHeaderColorArr = ["#FF69B4", "#58c7ea", "#E066FF", "#FF69B4", "#FFA54F", "#90EE90"];
leftHeader.forEach(tag = >{
    tagsColor = leftHeaderColorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.color = tagsColor;
});

/* 彩色标签云 */
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

/* 动态网站标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange',
function() {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
        document.title = '网页崩溃了！！！';
        clearTimeout(titleTime);
    } else {
        $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
        document.title = '咦，又好啦(✿◡‿◡)';
        titleTime = setTimeout(function() {
            document.title = OriginTitle;
        },
        2000);
    }
});

/* 打字动效 */
(function webpackUniversalModuleDefinition(a, b) {
    if (typeof exports === "object" && typeof module === "object") {
        module.exports = b()
    } else {
        if (typeof define === "function" && define.amd) {
            define([], b)
        } else {
            if (typeof exports === "object") {
                exports["POWERMODE"] = b()
            } else {
                a["POWERMODE"] = b()
            }
        }
    }
})(this,
function() {
    return (function(a) {
        var b = {};
        function c(e) {
            if (b[e]) {
                return b[e].exports
            }
            var d = b[e] = {
                exports: {},
                id: e,
                loaded: false
            };
            a[e].call(d.exports, d, d.exports, c);
            d.loaded = true;
            return d.exports
        }
        c.m = a;
        c.c = b;
        c.p = "";
        return c(0)
    })([function(c, g, b) {
        var d = document.createElement("canvas");
        d.width = window.innerWidth;
        d.height = window.innerHeight;
        d.style.cssText = "position:fixed;top:0;left:0;pointer-events:none;z-index:999999";
        window.addEventListener("resize",
        function() {
            d.width = window.innerWidth;
            d.height = window.innerHeight
        });
        document.body.appendChild(d);
        var a = d.getContext("2d");
        var n = [];
        var j = 0;
        var k = 120;
        var f = k;
        var p = false;
        o.shake = true;
        function l(r, q) {
            return Math.random() * (q - r) + r
        }
        function m(r) {
            if (o.colorful) {
                var q = l(0, 360);
                return "hsla(" + l(q - 10, q + 10) + ", 100%, " + l(50, 80) + "%, " + 1 + ")"
            } else {
                return window.getComputedStyle(r).color
            }
        }
        function e() {
            var t = document.activeElement;
            var v;
            if (t.tagName === "TEXTAREA" || (t.tagName === "INPUT" && t.getAttribute("type") === "text")) {
                var u = b(1)(t, t.selectionStart);
                v = t.getBoundingClientRect();
                return {
                    x: u.left + v.left,
                    y: u.top + v.top,
                    color: m(t)
                }
            }
            var s = window.getSelection();
            if (s.rangeCount) {
                var q = s.getRangeAt(0);
                var r = q.startContainer;
                if (r.nodeType === document.TEXT_NODE) {
                    r = r.parentNode
                }
                v = q.getBoundingClientRect();
                return {
                    x: v.left,
                    y: v.top,
                    color: m(r)
                }
            }
            return {
                x: 0,
                y: 0,
                color: "transparent"
            }
        }
        function h(q, s, r) {
            return {
                x: q,
                y: s,
                alpha: 1,
                color: r,
                velocity: {
                    x: -1 + Math.random() * 2,
                    y: -3.5 + Math.random() * 2
                }
            }
        }
        function o() {
            var t = e();
            var s = 5 + Math.round(Math.random() * 10);
            while (s--) {
                n[j] = h(t.x, t.y, t.color);
                j = (j + 1) % 500
            }
            f = k;
            if (!p) {
                requestAnimationFrame(i)
            }
            if (o.shake) {
                var r = 1 + 2 * Math.random();
                var q = r * (Math.random() > 0.5 ? -1 : 1);
                var u = r * (Math.random() > 0.5 ? -1 : 1);
                document.body.style.marginLeft = q + "px";
                document.body.style.marginTop = u + "px";
                setTimeout(function() {
                    document.body.style.marginLeft = "";
                    document.body.style.marginTop = ""
                },
                75)
            }
        }
        o.colorful = false;
        function i() {
            if (f > 0) {
                requestAnimationFrame(i);
                f--;
                p = true
            } else {
                p = false
            }
            a.clearRect(0, 0, d.width, d.height);
            for (var q = 0; q < n.length; ++q) {
                var r = n[q];
                if (r.alpha <= 0.1) {
                    continue
                }
                r.velocity.y += 0.075;
                r.x += r.velocity.x;
                r.y += r.velocity.y;
                r.alpha *= 0.96;
                a.globalAlpha = r.alpha;
                a.fillStyle = r.color;
                a.fillRect(Math.round(r.x - 1.5), Math.round(r.y - 1.5), 3, 3)
            }
        }
        requestAnimationFrame(i);
        c.exports = o
    },
    function(b, a) { (function() {
            var d = ["direction", "boxSizing", "width", "height", "overflowX", "overflowY", "borderTopWidth", 
                     "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderStyle", "paddingTop", 
                     "paddingRight", "paddingBottom", "paddingLeft", "fontStyle", "fontVariant", "fontWeight",
                     "fontStretch", "fontSize", "fontSizeAdjust", "lineHeight", "fontFamily", "textAlign", 
                     "textTransform", "textIndent", "textDecoration", "letterSpacing", "wordSpacing", "tabSize", 
                     "MozTabSize"];
            var e = window.mozInnerScreenX != null;
            function c(k, l, o) {
                var h = o && o.debug || false;
                if (h) {
                    var i = document.querySelector("#input-textarea-caret-position-mirror-div");
                    if (i) {
                        i.parentNode.removeChild(i)
                    }
                }
                var f = document.createElement("div");
                f.id = "input-textarea-caret-position-mirror-div";
                document.body.appendChild(f);
                var g = f.style;
                var j = window.getComputedStyle ? getComputedStyle(k) : k.currentStyle;
                g.whiteSpace = "pre-wrap";
                if (k.nodeName !== "INPUT") {
                    g.wordWrap = "break-word"
                }
                g.position = "absolute";
                if (!h) {
                    g.visibility = "hidden"
                }
                d.forEach(function(p) {
                    g[p] = j[p]
                });
                if (e) {
                    if (k.scrollHeight > parseInt(j.height)) {
                        g.overflowY = "scroll"
                    }
                } else {
                    g.overflow = "hidden"
                }
                f.textContent = k.value.substring(0, l);
                if (k.nodeName === "INPUT") {
                    f.textContent = f.textContent.replace(/\s/g, "\u00a0")
                }
                var n = document.createElement("span");
                n.textContent = k.value.substring(l) || ".";
                f.appendChild(n);
                var m = {
                    top: n.offsetTop + parseInt(j["borderTopWidth"]),
                    left: n.offsetLeft + parseInt(j["borderLeftWidth"])
                };
                if (h) {
                    n.style.backgroundColor = "#aaa"
                } else {
                    document.body.removeChild(f)
                }
                return m
            }
            if (typeof b != "undefined" && typeof b.exports != "undefined") {
                b.exports = c
            } else {
                window.getCaretCoordinates = c
            }
        } ())
    }])
});
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener("input", POWERMODE);

<!-- 复制样式CSS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

/* 复制效果 */
document.body.oncopy = function() {
    Swal.fire({
        allowOutsideClick: false,
        type: 'success',
        title: '复制成功，如转载请注明出处！',
        showConfirmButton: false,
        timer: 2000
    });
};

setTimeout(function (){document.querySelector(".skPlayer-source").volume=0.3;}, 3000);

<!-- 自定义右键菜单美化 -->
<style type="text/css">
    a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center
    center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px
    1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;
    border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul
    li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
    div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff
    !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li>
            <a href="https://www.huarzone.com/">
                <i class="fa fa-home fa-fw">
                </i>
                <span>
                    首页
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" onclick="getSelect();">
                <i class="fa fa-copy fa-fw">
                </i>
                <span>
                    复制
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:void(0);" onclick="baiduSearch();">
                <i class="fa fa-search fa-fw">
                </i>
                <span>
                    搜索
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:history.go(1);">
                <i class="fa fa-arrow-right fa-fw">
                </i>
                <span>
                    前进
                </span>
            </a>
        </li>
        <li>
            <a href="javascript:history.go(-1);">
                <i class="fa fa-arrow-left fa-fw">
                </i>
                <span>
                    后退
                </span>
            </a>
        </li>
        <li style="border-bottom:1px solid gray">
            <a href="javascript:window.location.reload();">
                <i class="fa fa-refresh fa-fw">
                </i>
                <span>
                    重载网页
                </span>
            </a>
        </li>
        <li>
            <a href="/page/links">
                <i class="fa fa-meh-o fa-fw">
                </i>
                <span>
                    和我当邻居
                </span>
            </a>
        </li>
        <li>
            <a href="/page/messages">
                <i class="fa fa-pencil-square-o fa-fw">
                </i>
                <span>
                    给我留言吧
                </span>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                c = 0,
                h = 0,
                k = 0,
                e = 0,
                f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return ! 1
                }
            }
        })
    })(jQuery);

    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent,
        b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
</script>

<!-- 动态网站标题 -->
<script>
    var OriginTitle = document.title;
    var titleTime;
    document.addEventListener('visibilitychange',
    function() {
        if (document.hidden) {
            $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
            document.title = 'ヽ(●-`Д´-)ノ别走啊！';
            clearTimeout(titleTime);
        } else {
            $('[rel="icon"]').attr('href', "https://s3.bmp.ovh/imgs/2021/11/2e64a8d75a06e511.png");
            document.title = 'ヾ(Ő∀Ő3)ノ想我啦！' + OriginTitle;
            titleTime = setTimeout(function() {
                document.title = OriginTitle;
            },
            2000);
        }
    });
</script>

<!-- 网页鼠标点击特效 - 核心价值观关键字 -->
<script>
    (function () {
        var a_idx = 0;
        window.onclick = function (event) {
            var a = new Array("🎉富强🎉", "🐳民主🐳", "⛅文明⛅", "🤖和谐🤖",
                              "🎉自由🎉", "🐳平等🐳", "⛅公正⛅", "🤖法治🤖", 
                              "🎉爱国🎉", "🐳敬业🐳", "⛅诚信⛅", "🤖友善🤖");
            var heart = document.createElement("b"); //创建b元素
            heart.onselectstart = new Function('event.returnValue=false'); //防止拖动

            document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
            a_idx = (a_idx + 1) % a.length;
            heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式

            var f = 13, // 字体大小
                x = event.clientX - f / 2 - 30, // 横坐标
                y = event.clientY - f, // 纵坐标
                c = randomColor(), // 随机颜色
                a = 1, // 透明度
                s = 0.8; // 放大缩小

            var timer = setInterval(function () { //添加定时器
                if (a <= 0) {
                    document.body.removeChild(heart);
                    clearInterval(timer);
                } else {
                    heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                        c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                        s + ");";

                    y--;
                    a -= 0.016;
                    s += 0.002;
                }
            }, 15)
        }
        // 随机颜色
        function randomColor() {
            return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
        }
    }());
</script>

<!-- 输出控制台 -->
<script type="text/javascript">
    console.clear();
    console.log("\n %c TuJun's Blog  控制台--没什么可看的", "color:#fff;background: linear-gradient(to right , #7A88FF, #d27aff);padding:5px;border-radius: 10px;"); 
</script>

//容器ID
id: '',

// 个数
num: 100,

// 如果数量小于num，有这些几率添加一个新的
start_probability: 0.1,

// 初始半径最小值
radius_min: 1,

// 初始半径最大值
radius_max: 2,

// 半径增加最小值
radius_add_min: .3,

// 半径增加最大值
radius_add_max: .5,

// 初始透明度最小值
opacity_min: 0.3,

// 初始透明度最大值
opacity_max: 0.5,

// 透明度递减值最小值
opacity_prev_min: .003,

// 透明度递减值最大值
opacity_prev_max: .005,

// 颜色亮度最小值
light_min: 40,

// 颜色亮度最大值
light_max: 70,

//泡泡颜色是否相同
is_same_color: false,

//背景颜色
background: "#f1f3f4"

<div id="bubble">
</div>
<script>
    class BGBubble {
        constructor(i) {
            this.defaultOpts = {
                id: "",
                num: 100,
                start_probability: .1,
                radius_min: 1,
                radius_max: 2,
                radius_add_min: .3,
                radius_add_max: .5,
                opacity_min: .3,
                opacity_max: .5,
                opacity_prev_min: .003,
                opacity_prev_max: .005,
                light_min: 40,
                light_max: 70,
                is_same_color: !1,
                background: "#f1f3f4"
            },
            "[object Object]" == Object.prototype.toString.call(i) ? this.userOpts = {...this.defaultOpts,
                ...i
            }: this.userOpts = {...this.defaultOpts,
                id: i
            },
            this.color = this.random(0, 360),
            this.bubbleNum = [],
            this.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame 
            || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
            this.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
        }
        random(i, t) {
            return Math.random() * (t - i) + i
        }
        initBubble(i, t) {
            const a = window.innerWidth,
            s = window.innerHeight,
            n = this.userOpts,
            e = this.random(n.light_min, n.light_max);
            this.bubble = {
                x: this.random(0, a),
                y: this.random(0, s),
                radius: this.random(n.radius_min, n.radius_max),
                radiusChange: this.random(n.radius_add_min, n.radius_add_max),
                opacity: this.random(n.opacity_min, n.opacity_max),
                opacityChange: this.random(n.opacity_prev_min, n.opacity_prev_max),
                light: e,
                color: `hsl($ {
                    t ? i: this.random(0, 360)
                },
                100 % , $ {
                    e
                } % )`
            }
        }
        bubbling(i, t, a) { ! this.bubble && this.initBubble(t, a);
            const s = this.bubble;
            i.fillStyle = s.color,
            i.globalAlpha = s.opacity,
            i.beginPath(),
            i.arc(s.x, s.y, s.radius, 0, 2 * Math.PI, !0),
            i.closePath(),
            i.fill(),
            i.globalAlpha = 1,
            s.opacity -= s.opacityChange,
            s.radius += s.radiusChange,
            s.opacity <= 0 && this.initBubble(t, a)
        }
        createCanvas() {
            this.canvas = document.createElement("canvas"),
            this.ctx = this.canvas.getContext("2d"),
            this.canvas.style.display = "block",
            this.canvas.width = window.innerWidth,
            this.canvas.height = window.innerHeight,
            this.canvas.style.position = "fixed",
            this.canvas.style.top = "0",
            this.canvas.style.left = "0",
            this.canvas.style.zIndex = "-1",
            document.getElementById(this.userOpts.id).appendChild(this.canvas),
            window.onresize = (() = >{
                this.canvas.width = window.innerWidth,
                this.canvas.height = window.innerHeight
            })
        }
        start() {
            const i = window.innerWidth,
            t = window.innerHeight;
            this.color += .1,
            this.ctx.fillStyle = this.defaultOpts.background,
            this.ctx.fillRect(0, 0, i, t),
            this.bubbleNum.length < this.userOpts.num && Math.random() < 
            this.userOpts.start_probability && this.bubbleNum.push(new BGBubble),
            this.bubbleNum.forEach(i = >i.bubbling(this.ctx, this.color, this.userOpts.is_same_color));
            const a = this.requestAnimationFrame;
            this.myReq = a(() = >this.start())
        }
        destory() { (0, this.cancelAnimationFrame)(this.myReq),
            window.onresize = null
        }
    }
    const bubbleDemo = new BGBubble("bubble");
    bubbleDemo.createCanvas(),
    bubbleDemo.start();
</script>

<!-- 禁用 F12 调试模式 -->
<script type="text/javascript">
    $(document).ready(function() {
        document.oncontextmenu = function() {
            return false;
        }
        //document.onselectstart = function () {
        // return false;
        // }
        //document.oncopy = function () {
        //return false;
        // }
        document.onkeydown = function() {
            //f12
            if (window.event && window.event.keyCode == 123) {
                event.keyCode = 0;
                event.returnValue = false;
                layer.msg("球球了，别再扒孩子了=.=") return false;
            }
            //ctrl+u
            if (event.ctrlKey && window.event.keyCode == 85) {
                return false;
            }
            //ctrl+shift+i
            if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
                return false;
            }
            // Ctrl+S
            else if ((event.ctrlKey) && (event.keyCode == 83)) {
                return false;
            }
        };

    });
</script>
<script>
    //debug调试时跳转页面
    var element = new Image();
    Object.defineProperty(element, 'id', {
        get: function() {
            window.location.href = "https://www.huarzone.com"
        }
    });
    console.log(element);
</script>

<span class="text-muted text-xs block">
    <div id="chakhsu">
    </div>
    <script>
        var chakhsu = function(r) {
            function t() {
                return b[Math.floor(Math.random() * b.length)]
            }
            function e() {
                return String.fromCharCode(94 * Math.random() + 33)
            }
            function n(r) {
                for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                    var l = document.createElement("span");
                    l.textContent = e(),
                    l.style.color = t(),
                    n.appendChild(l)
                }
                return n
            }
            function i() {
                var t = o[c.skillI];
                c.step ? c.step--:(c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && 
                (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? 
                (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = "backward", c.delay = a) 
                : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length,
                c.direction = "forward")),
                r.textContent = c.text,
                r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
                setTimeout(i, d)
            }
            /*以下内容自定义修改*/
            var l = "🧐",
            o = ["自我介绍编辑处"].map(function(r) {
                return r + ""
            }),
            a = 2,
            g = 1,
            s = 5,
            d = 75,
            b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", 
                 "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", 
                 "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)",
                 "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
            c = {
                text: "",
                prefixP: -s,
                skillI: 0,
                skillP: 0,
                direction: "forward",
                delay: a,
                step: g
            };
            i()
        };
        chakhsu(document.getElementById('chakhsu'));
    </script>
</span>

<!--内容结束分割线-->
<div class="tt-fenge-end">
    <span>End</span>
</div>
<!--/ 内容结束分割线-->

/* 文章正文下的结束End分割线样式 */
.tt-fenge-end {
	border-top:2px dotted #eee;
	height:0px;
	margin:35px 0px;
	text-align:center;
	width:100%;
	line-height:1.6em;
}

.tt-fenge-end span {
	background-color:#23b7e5;
	color:#fff;
	padding:2px 8px;
	position:relative;
	top:-14px;
	border-radius:12px;
	font-size:12px;
}

/* 深色模式下文章正文下的结束End分割线颜色 */
html.theme-dark .tt-fenge-end {
	border-top:2px dotted #4f4f4f;
}

<!-- 时间倒计时代码开始 -->
<section id="blog_info" class="widget widget_categories wrapper-md clear">
    <h5 class="widget-title m-t-none">
        <?php _me( "时间沙漏") ?>
    </h5>
    <div class="sidebar sidebar-count">
        <div class="content">
            <div class="item" id="dayProgress">
                <div class="title">
                    今日已经过去
                    <span>
                    </span>
                    小时
                </div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-1">
                        </div>
                    </div>
                    <div class="progress-percentage">
                    </div>
                </div>
            </div>
            <div class="item" id="weekProgress">
                <div class="title">
                    这周已经过去
                    <span>
                    </span>
                    天
                </div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-2">
                        </div>
                    </div>
                    <div class="progress-percentage">
                    </div>
                </div>
            </div>
            <div class="item" id="monthProgress">
                <div class="title">
                    本月已经过去
                    <span>
                    </span>
                    天
                </div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-3">
                        </div>
                    </div>
                    <div class="progress-percentage">
                    </div>
                </div>
            </div>
            <div class="item" id="yearProgress">
                <div class="title">
                    今年已经过去
                    <span>
                    </span>
                    个月
                </div>
                <div class="progress">
                    <div class="progress-bar">
                        <div class="progress-inner progress-inner-4">
                        </div>
                    </div>
                    <div class="progress-percentage">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 时间倒计时代码结束 -->a

<!-- 时间流逝 -->
<script type="text/javascript">
function init_life_time() {
    function getAsideLifeTime() {
        /* 当前时间戳 */
        let nowDate = +new Date();
        /* 今天开始时间戳 */
        let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
        /* 今天已经过去的时间 */
        let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60;
        /* 今天已经过去的时间比 */
        let todayPassHoursPercent = (todayPassHours / 24) * 100;
        $('#dayProgress .title span').html(parseInt(todayPassHours));
        $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%');
        $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%');
        /* 当前周几 */
        let weeks = {
            0 : 7,
            1 : 1,
            2 : 2,
            3 : 3,
            4 : 4,
            5 : 5,
            6 : 6
        };
        let weekDay = weeks[new Date().getDay()];
        let weekDayPassPercent = (weekDay / 7) * 100;
        $('#weekProgress .title span').html(weekDay);
        $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%');
        $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%');
        let year = new Date().getFullYear();
        let date = new Date().getDate();
        let month = new Date().getMonth() + 1;
        let monthAll = new Date(year, month, 0).getDate();
        let monthPassPercent = (date / monthAll) * 100;
        $('#monthProgress .title span').html(date);
        $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%');
        $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%');
        let yearPass = (month / 12) * 100;
        $('#yearProgress .title span').html(month);
        $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%');
        $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%');
    }
    getAsideLifeTime();
    setInterval(() => {
        getAsideLifeTime();
    },
    1000);
}
init_life_time()
</script>

/* 时间流逝 */
.sidebar-count .content {
    padding: 15px
}
 
.sidebar-count .content .item {
    margin-bottom: 15px
}
 
.sidebar-count .content .item:last-child {
    margin-bottom: 0
}
 
.sidebar-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.sidebar-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.sidebar-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.sidebar-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.sidebar-count .content .item .progress .progress-percentage {
    color: var(--info)
}