又是一年新旧交替时，站在时光的门槛上，回望这一年的旅程，心中充满了感慨。这一年，我们每个人都是自己故事的主角，有的充满欢笑，有的带着泪水；有的硕果累累，有的略显失落。但无论如何，我们都勇敢地走过了这段旅程。（嗯，这段网上抄的）

在这个迟到的新年时刻，我想对你们说：感谢你们，感谢这一年的陪伴和支持。虽然我们可能素未谋面，但在这片虚拟的天地里，我们有着共同的语言——博客，这也是我为数不多的爱好之一，也是我坚持最久的爱好之一。

年末的忙碌几乎让我忘记了新年的祝福，但在这里，我要大声说出：祝大家新年快乐呀！愿新的一年，我们都能拥有更多的欢笑和收获。

元旦后的第一个工作日，进入办公室就被同事的咖啡香唤醒，感觉整个人都充满了活力。中午，大家一起吃了美味的手枪腿，也是对新一年的美好祝愿——希望团队能够蒸蒸日上。

新年这几天，朋友圈里，好友们纷纷晒出了自己的“年终总结”，我也忍不住加入了这场“晒总结”。

[img][/img]

今年的跨年夜，没有了往年的喧嚣，大家都没有聚在一起，或许是因为大家都在忙碌中找到了自己的节奏，但那份对新年的期待从未改变。

在元旦前的半个月里，我几乎把所有的业余时间都投入到了 Typecho 插件的折腾中。一切始于偶然发现的古老插件 [t github.com/tennsinn/TeWords]TeWords[/t]，原本只是想简单地修复一下兼容性问题，但谁知道，一折腾就是大半个月。果然代码的魅力就像美女，一旦碰了就难以自拔。

原本的简单修复变成了一场折腾风暴，改得越多，想法也越多，最终完全停不下来。[t demo.jdeal.cn/time]插件效果展示[/t] 当然，当我写下这篇文章的时候，我已经暂时放下了 （因为新的一年，时间变得更加宝贵） 嗯，当然不是，是因为年底开始忙了，哈哈。

希望在2025年，我们能继续保持对生活的热爱，对新鲜事物的探索热情，继续创造不一样的故事。也希望友链圈的小伙伴们能一起坚持，一起加油，共同迎接新的挑战！

上周出差归来，终于迎来了些许闲暇时光。然而，我爱折腾的内心似乎总是停不下来，于是又开始了新的一轮折腾。

🎊 首页动态优化：灵感与实践的碰撞

一直以来都想在首页添加一个调用片刻的展示区域，但始终没有找到满意的样式。直到有一天，手机锁屏上的通知栏给了我启发。仿照着它的设计，创建了一个自己的动态展示区。虽然成品并不完美，但它已经能够满足基本的需求，还是让我感到非常满意的，后期再慢慢优化。

实现这个功能的代码主要集中在 CSS，相对简单，需要的小伙伴可以自行源码里查看。

📱 Scriptable 小组件：新的尝试

接着，在木木老师的新文章 [t immmmm.com/diy-ios-widget]自制 iOS 小组件，随机显示一条 Memos[/t] 中，我发现了 Scriptable 这款应用。经过一番浅浅的研究后，成功鼓捣出了两个小组件。

🥳 RSS 动态展示：实时掌握博友圈

第一个组件连接到了之前写好的RSS API，能够解析并展示友链内好友最新发布的文章列表。这意味着，现在我可以直接通过手机桌面查看朋友们最新的创作啦！

🎲 Typecho 数据展示：iTerm 小组件

第二个则是受到 Scriptable 里一款模仿 iTerm 外观组件的启发，花费大约半小时时间编写了一个接口，用于获取 Typecho 网站的部分数据。根据个人喜好调整了配色方案和字体选择后，最终效果令人眼前一亮。尽管英文部分是由机翻而来，略显生硬，但这并不影响整体体验。

🏗 修路工程：生活中的小琐事

此外，不得不提的是，最近公司门口正在进行的道路施工，预计将持续至2026年。每天上下班都要面对拥堵不堪的交通状况以及嘈杂的施工噪音，真是让人头疼不已。

转眼间，十一月即将结束，2024年的最后一个月即将到来。让我们一起加油吧，迎接新的一年！

在关注的公众号里发现一段挺可爱的源码，效果正如你进入这篇文章时看到的，屏幕上飘满了小气球。

至于这玩意有啥用，其实我也没想好。🤣 不过，有几个初步的想法：

生日小惊喜：在博主的生日那天，让气球飘满屏幕，营造出温馨而欢乐的生日氛围。

博友纪念日：记录下每位博友的首次评论时间，当在第365天再次访问时，用一场气球雨，再配些许文案，作为周年惊喜。

互动小体验：或许还可以根据用户的某些操作来触发气球雨，增加用户与网站的互动。

还有哪些可玩的花样呢？🎉

最后，话不多说，送上代码：

<script>
(function() {
    'use strict';
    var __assign = function() {
        __assign = Object.assign ||
        function __assign(t) {
            for (var s, i = 1,
            n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };
    typeof SuppressedError === "function" ? SuppressedError: function(error, suppressed, message) {
        var e = new Error(message);
        return e.name = "SuppressedError",
        e.error = error,
        e.suppressed = suppressed,
        e;
    };
    var defaultBalloonColor = "#84A332";
    var defaultLightColor = "#C0F381";
    var balloonColorProperty = "--balloon-color";
    var lightColorProperty = "--light-color";
    var widthProperty = "--balloon-width";
    var heightProperty = "--balloon-height";
    var balloonDefaultSize = {
        width: 233,
        height: 609,
    };
    var createBallonElement = function(_a) {
        var balloonColor = _a.balloonColor,
        lightColor = _a.lightColor,
        width = _a.width;
        var balloon = document.createElement("balloon");
        balloon.innerHTML = balloonSvgHTML;
        Object.assign(balloon.style, {
            position: "absolute",
            overflow: "hidden",
            top: "0",
            left: "0",
            display: "inline-block",
            isolation: "isolate",
            transformStyle: "preserve-3d",
            backfaceVisibility: "hidden",
            opacity: "0.001",
            transform: "translate(calc(-100% + 1px), calc(-100% + 1px))",
            contain: "style, layout, paint",
            transformOrigin: "".concat(width / 2, "px ").concat(width / 2, "px"),
            willChange: "transform",
        });
        balloon.style.setProperty(balloonColorProperty, balloonColor);
        balloon.style.setProperty(lightColorProperty, lightColor);
        balloon.style.setProperty(widthProperty, width + "px");
        balloon.style.setProperty(heightProperty, (width * 609) / 223 + "px");
        return balloon;
    };
    var balloonSvgHTML = "\n<svg\n\nstyle=\"width: var(".concat(widthProperty, "); height: var(").concat(heightProperty, ");\"\nviewBox=\"0 0 223 609\"\nfill=\"none\"\nxmlns=\"http://www.w3.org/2000/svg\"\n>\n<g opacity=\"0.8\" filter=\"url(#filter0_f_102_49)\" >\n  <path\n    d=\"M117.5 253C136.167 294.5 134.7 395 125.5 453C116.3 511 133.833 578.167 125.5 606\"\n    stroke=\"url(#paint0_linear_102_49)\"\n    stroke-width=\"2\"\n  />\n</g>\n<g opacity=\"0.85\" filter=\"url(#filter1_ii_102_49)\">\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M176.876 204.032C181.934 198.064 209.694 160.262 210.899 127.619C213.023 70.1236 176.876 13 118.337 13C55.7949 13 18.5828 69.332 22.2724 127.619C24.0956 156.423 38.9766 178.5 51.7922 195.372C57.7811 203.257 90.0671 238.749 112.15 245.044C111.698 248.246 112.044 253.284 116.338 254H121.838V245.71C143.277 242.292 172.085 209.686 176.876 204.032Z\"\n    fill=\"var(").concat(balloonColorProperty, ", ").concat(defaultBalloonColor, ")\"\n  />\n</g>\n<g filter=\"url(#filter2_f_102_49)\">\n  <path\n    d=\"M125 256.5C125 258.433 122.09 260 118.5 260C114.91 260 112 258.433 112 256.5C112 254.567 114.91 255 118.5 255C122.09 255 125 254.567 125 256.5Z\"\n    fill=\"var(").concat(balloonColorProperty, ", ").concat(defaultBalloonColor, ")\"\n  />\n</g>\n<g opacity=\"0.2\" filter=\"url(#filter3_f_102_49)\">\n  <path\n    d=\"M178.928 128.12C178.011 152.146 172.137 162.97 154.623 184.2C141.594 199.992 128.28 215 112.805 215C104.349 215 92.739 215 65.2673 177.844C56.1123 165.461 45.4818 149.259 44.1794 128.12C41.5436 85.3424 68.1267 44 112.805 44C154.623 44 180.55 85.6242 178.928 128.12Z\"\n    fill=\"url(#paint1_radial_102_49)\"\n  />\n</g>\n<g\n  style=\"mix-blend-mode: lighten\"\n  opacity=\"0.7\"\n  filter=\"url(#filter4_df_102_49)\"\n>\n  <path\n    d=\"M72.7992 108.638L74.0985 87.5247C74.3145 84.0152 77.4883 81.4427 80.9664 81.958L94.8619 84.0166C98.4018 84.541 100.699 88.0277 99.7828 91.4871L94.0502 113.144C93.1964 116.369 89.8758 118.278 86.659 117.394L77.1969 114.792C74.4599 114.039 72.6249 111.471 72.7992 108.638Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g\n  style=\"mix-blend-mode: lighten\"\n  opacity=\"0.5\"\n  filter=\"url(#filter5_f_102_49)\"\n>\n  <path\n    d=\"M147.76 88.7366L144.842 67.9855C144.378 64.687 141.316 62.3976 138.021 62.8858L123.638 65.0166C120.098 65.541 117.801 69.0277 118.717 72.4871L124.462 94.1891C125.311 97.3967 128.602 99.3061 131.808 98.4512L143.364 95.3695C146.296 94.5878 148.182 91.7409 147.76 88.7366Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g style=\"mix-blend-mode: lighten\" filter=\"url(#filter6_f_102_49)\">\n  <path\n    d=\"M46.4087 131.164C38.1642 111.726 43.2454 91.2599 47.4381 82.0988C47.7504 81.4164 48.5574 80.8601 48.8712 81.5418C48.9711 81.7589 48.9188 82.1169 48.8357 82.3409C41.2341 102.832 45.5154 122.958 47.3397 130.925C47.8434 133.124 47.2898 133.242 46.4087 131.164Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g style=\"mix-blend-mode: lighten\" filter=\"url(#filter7_f_102_49)\">\n  <path\n    d=\"M46.4087 131.164C38.1642 111.726 43.2454 91.2599 47.4381 82.0988C47.7504 81.4164 48.5574 80.8601 48.8712 81.5418C48.9711 81.7589 48.9188 82.1169 48.8357 82.3409C41.2341 102.832 45.5154 122.958 47.3397 130.925C47.8434 133.124 47.2898 133.242 46.4087 131.164Z\"\n    fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n  />\n</g>\n<g opacity=\"0.3\">\n  <g style=\"mix-blend-mode: lighten\" filter=\"url(#filter8_f_102_49)\">\n    <path\n      d=\"M190.817 150.078C196.906 136.754 196.503 119.258 195.396 111.05C195.318 110.475 194.888 109.925 194.734 110.403C194.704 110.495 194.689 110.697 194.699 110.807C196.396 129.344 191.942 144.593 190.447 149.824C190.122 150.959 190.349 151.104 190.817 150.078Z\"\n      fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n    />\n  </g>\n  <g style=\"mix-blend-mode: lighten\" filter=\"url(#filter9_f_102_49)\">\n    <path\n      d=\"M190.817 150.078C196.906 136.754 196.503 119.258 195.396 111.05C195.318 110.475 194.888 109.925 194.734 110.403C194.704 110.495 194.689 110.697 194.699 110.807C196.396 129.344 191.942 144.593 190.447 149.824C190.122 150.959 190.349 151.104 190.817 150.078Z\"\n      fill=\"var(").concat(lightColorProperty, ", ").concat(defaultLightColor, ")\"\n    />\n  </g>\n</g>\n</svg>\n");
    var svgFiltersHtml = "\n<svg>\n  <defs>\n    <filter\n      id=\"filter0_f_102_49\"\n      x=\"114.588\"\n      y=\"250.59\"\n      width=\"20.5082\"\n      height=\"357.697\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"1\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter1_ii_102_49\"\n      x=\"22.0213\"\n      y=\"13\"\n      width=\"188.967\"\n      height=\"241\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feColorMatrix\n        in=\"SourceAlpha\"\n        type=\"matrix\"\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        result=\"hardAlpha\"\n      />\n      <feOffset />\n      <feGaussianBlur stdDeviation=\"4.5\" />\n      <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n      <feColorMatrix\n        type=\"matrix\"\n        values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0\"\n      />\n      <feBlend\n        mode=\"normal\"\n        in2=\"shape\"\n        result=\"effect1_innerShadow_102_49\"\n      />\n      <feColorMatrix\n        in=\"SourceAlpha\"\n        type=\"matrix\"\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        result=\"hardAlpha\"\n      />\n      <feOffset />\n      <feGaussianBlur stdDeviation=\"18\" />\n      <feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" />\n      <feColorMatrix\n        type=\"matrix\"\n        values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0\"\n      />\n      <feBlend\n        mode=\"overlay\"\n        in2=\"effect1_innerShadow_102_49\"\n        result=\"effect2_innerShadow_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter2_f_102_49\"\n      x=\"111\"\n      y=\"253.959\"\n      width=\"15\"\n      height=\"7.04138\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"0.5\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter3_f_102_49\"\n      x=\"0\"\n      y=\"0\"\n      width=\"223\"\n      height=\"259\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"22\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter4_df_102_49\"\n      x=\"46.7878\"\n      y=\"59.8922\"\n      width=\"79.1969\"\n      height=\"87.7179\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feColorMatrix\n        in=\"SourceAlpha\"\n        type=\"matrix\"\n        values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n        result=\"hardAlpha\"\n      />\n      <feOffset dy=\"4\" />\n      <feGaussianBlur stdDeviation=\"13\" />\n      <feComposite in2=\"hardAlpha\" operator=\"out\" />\n      <feColorMatrix\n        type=\"matrix\"\n        values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0\"\n      />\n      <feBlend\n        mode=\"overlay\"\n        in2=\"BackgroundImageFix\"\n        result=\"effect1_dropShadow_102_49\"\n      />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"effect1_dropShadow_102_49\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"5.5\"\n        result=\"effect2_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter5_f_102_49\"\n      x=\"102.515\"\n      y=\"46.8202\"\n      width=\"61.3035\"\n      height=\"67.8351\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"8\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter6_f_102_49\"\n      x=\"34\"\n      y=\"73.2313\"\n      width=\"22.9258\"\n      height=\"67.4198\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"4\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter7_f_102_49\"\n      x=\"40\"\n      y=\"79.2313\"\n      width=\"10.9258\"\n      height=\"55.4198\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"1\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter8_f_102_49\"\n      x=\"186.419\"\n      y=\"106.345\"\n      width=\"13.5106\"\n      height=\"48.2987\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"1.93775\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <filter\n      id=\"filter9_f_102_49\"\n      x=\"189.326\"\n      y=\"109.252\"\n      width=\"7.69731\"\n      height=\"42.4855\"\n      filterUnits=\"userSpaceOnUse\"\n      color-interpolation-filters=\"sRGB\"\n    >\n      <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\n      <feBlend\n        mode=\"normal\"\n        in=\"SourceGraphic\"\n        in2=\"BackgroundImageFix\"\n        result=\"shape\"\n      />\n      <feGaussianBlur\n        stdDeviation=\"0.484439\"\n        result=\"effect1_foregroundBlur_102_49\"\n      />\n    </filter>\n    <linearGradient\n      id=\"paint0_linear_102_49\"\n      x1=\"124.798\"\n      y1=\"253\"\n      x2=\"124.798\"\n      y2=\"606\"\n      gradientUnits=\"userSpaceOnUse\"\n    >\n      <stop stop-color=\"white\" />\n      <stop offset=\"0.474934\" stop-color=\"grey\" stop-opacity=\"0.1\" />\n      <stop offset=\"0.722707\" stop-color=\"white\" stop-opacity=\"0.6\" />\n      <stop offset=\"0.93469\" stop-color=\"grey\" stop-opacity=\"0.7\" />\n      <stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\" />\n    </linearGradient>\n    <radialGradient\n      id=\"paint1_radial_102_49\"\n      cx=\"0\"\n      cy=\"0\"\n      r=\"1\"\n      gradientUnits=\"userSpaceOnUse\"\n      gradientTransform=\"translate(134 149.5) rotate(-123.69) scale(82.9277 65.4692)\"\n    >\n      <stop />\n      <stop offset=\"1\" stop-opacity=\"0\" />\n    </radialGradient>\n  </defs>\n</svg>\n";
    var easings = ["cubic-bezier(0.22, 1, 0.36, 1)", "cubic-bezier(0.33, 1, 0.68, 1)", ];
    var colorPairs = [["#ffec37ee", "#f8b13dff"], ["#f89640ee", "#c03940ff"], ["#3bc0f0ee", "#0075bcff"], ["#b0cb47ee", "#3d954bff"], ["#cf85b8ee", "#a3509dff"], ];
    function createBalloonAnimation(_a) {
        var balloon = _a.balloon,
        x = _a.x,
        y = _a.y,
        z = _a.z,
        targetX = _a.targetX,
        targetY = _a.targetY,
        targetZ = _a.targetZ,
        zIndex = _a.zIndex;
        balloon.style.zIndex = zIndex.toString();
        balloon.style.filter = "blur(".concat(zIndex > 7 ? 8 : 0, "px)");
        var getAnimation = function() {
            var tiltAngle = Math.random() * (15 - 8) + 8;
            var tiltDirection = Math.random() < 0.5 ? 1 : -1;
            return balloon.animate([{
                transform: "translate(-50%, 0%) translate3d(".concat(x, "px, ").concat(y, "px, ").concat(z, "px) rotate3d(0, 0, 1, ").concat(tiltDirection * -tiltAngle, "deg)"),
                opacity: 1,
            },
            {
                transform: "translate(-50%, 0%) translate3d(".concat(x + (targetX - x) / 2, "px, ").concat(y + (y + targetY * 5 - y) / 2, "px, ").concat(z + (targetZ - z) / 2, "px) rotate3d(0, 0, 1, ").concat(tiltDirection * tiltAngle, "deg)"),
                opacity: 1,
                offset: 0.5,
            },
            {
                transform: "translate(-50%, 0%) translate3d(".concat(targetX, "px, ").concat(y + targetY * 5, "px, ").concat(targetZ, "px) rotate3d(0, 0, 1, ").concat(tiltDirection * -tiltAngle, "deg)"),
                opacity: 1,
            },
            ], {
                duration: (Math.random() * 1000 + 5000) * 5,
                easing: easings[Math.floor(Math.random() * easings.length)],
                delay: zIndex * 200,
            });
        };
        return {
            balloon: balloon,
            getAnimation: getAnimation
        };
    }
    function balloons() {
        return new Promise(function(resolve) {
            var balloonsContainer = document.createElement("balloons");
            Object.assign(balloonsContainer.style, {
                overflow: "hidden",
                position: "fixed",
                inset: "0",
                zIndex: "999",
                display: "inline-block",
                pointerEvents: "none",
                perspective: "1500px",
                perspectiveOrigin: "50vw 100vh",
                contain: "style, layout, paint",
            });
            document.documentElement.appendChild(balloonsContainer);
            var sceneSize = {
                width: window.innerWidth,
                height: window.innerHeight
            };
            var balloonHeight = Math.floor(Math.min(sceneSize.width, sceneSize.height) * 1);
            var balloonWidth = (balloonDefaultSize.width / balloonDefaultSize.height) * balloonHeight;
            var amount = Math.max(7, Math.round(window.innerWidth / (balloonWidth / 2)));
            var maxDist = Math.max((amount * balloonWidth) / 2, (balloonWidth / 2) * 10);
            var balloonPositions = [];
            for (var i = 0; i < amount; i++) {
                var x = Math.round(sceneSize.width * Math.random());
                var y = window.innerHeight;
                var z = Math.round( - 1 * (Math.random() * maxDist));
                var targetX = Math.round(x + Math.random() * balloonWidth * 6 * (Math.random() > 0.5 ? 1 : -1));
                var targetY = -window.innerHeight;
                var targetZ = z;
                balloonPositions.push({
                    x: x,
                    y: y,
                    z: z,
                    targetX: targetX,
                    targetY: targetY,
                    targetZ: targetZ,
                });
            }
            balloonPositions = balloonPositions.sort(function(a, b) {
                return a.z - b.z;
            });
            var closestBallonPosition = balloonPositions[balloonPositions.length - 1];
            balloonPositions[0];
            balloonPositions = balloonPositions.map(function(pos) {
                return (__assign(__assign({},
                pos), {
                    z: pos.z - closestBallonPosition.z,
                    targetZ: pos.z - closestBallonPosition.z
                }));
            });
            var filtersElement = document.createElement("div");
            filtersElement.innerHTML = svgFiltersHtml;
            balloonsContainer.appendChild(filtersElement);
            var currentZIndex = 1;
            var animations = balloonPositions.map(function(pos, index) {
                var colorPair = colorPairs[index % colorPairs.length];
                var balloon = createBallonElement({
                    balloonColor: colorPair[1],
                    lightColor: colorPair[0],
                    width: balloonWidth,
                });
                balloonsContainer.appendChild(balloon);
                return createBalloonAnimation(__assign(__assign({
                    balloon: balloon
                },
                pos), {
                    zIndex: currentZIndex++
                }));
            });
            requestAnimationFrame(function() {
                var animationPromises = animations.map(function(_a) {
                    var balloon = _a.balloon,
                    getAnimation = _a.getAnimation;
                    var a = getAnimation();
                    return a.finished.then(function() {
                        balloon.remove();
                    });
                });
                Promise.all(animationPromises).then(function() {
                    balloonsContainer.remove();
                    resolve();
                });
            });
        });
    }
    document.addEventListener("DOMContentLoaded",
    function() {
        balloons();
        var button = document.getElementById("releastBalloonsButton");
        button === null || button === void 0 ? void 0 : button.addEventListener("click",
        function() {
            balloons();
        });
    });
})();
</script>

以上代码为原文源代码，需要自行删减修改配合自己页面使用。

代码不复杂，主要就是SVG占用的代码量比较大，可以在需要触发时作为文件引入，避免网站代码量过大。

最后，期待各位大佬的创意发挥~

近日，在浏览朋友们的博客时，我受到了不少灵感的启发，决定对我的博客进行一些小小的浅浅的改造，以增添几分新鲜感。

首先是博客的背景设计。背景底色借鉴了 [t ithe.cn]枫叶[/t] 博客，同时添加了动态元素，来自 [t www.rz.sb]若志随笔[/t] 的博客。尽管初次尝试可能会有些许不协调，但我认为这正是尝试新事物的乐趣所在，后面再融合自己的元素和想法慢慢调整。长期使用纯白色的背景后，加入一点点色彩与动态元素确实让整个页面焕发一些新的活力。😀

在探索 [t www.thyuu.com]风记星辰[/t] 的“关于”页面时，我被动态背景所吸引，便萌生了为自己的“关于”页面banner添加类似效果的想法。考虑到个人风格，我在原有的基础上进行了简单的调整和借鉴，最终选用了自己的一张自拍恶搞照片作为背景。虽然这张照片可能拍的不太专业，但又不是不能用。😁 同时也对“友链”页面的banner进行了更新。

此次改动主要通过纯CSS实现，尽量保持了原有代码的简洁性。预估，背景颜色的改变增加了约0.1KB的资源加载量，其他内部页面则大约增加了0.2KB左右。

对于这次的浅浅的改造，我还是感到非常满意的。希望有时间能够继续探索更多创意，进一步优化网站的设计。如果你对这些变化感兴趣，欢迎移步 [w www.jdeal.cn/about.html]关于[/w] 和 [w www.jdeal.cn/links.html]友链[/w] 页面，体验一下新的效果。

下周，又要踏上为期一周的出差旅程。虽然工作会比较繁忙，但我相信每一次的挑战都是成长的机会。

这次尝试下出差期间，抽空更新更新博客，分享旅途中的所见所闻。加油！💪

上个礼拜，出差到几座城市，每晚都入住不同风格的酒店。令我惊奇的是，这些酒店都配备了小度智能音箱，只需轻轻一句“小度小度”，便能轻松操控房间内的各种设备。

这一切激发了我的灵感，让我想起了家中那台因费红外遥控而无法使用语音和联网控制的电器。我曾尝试过用万能遥控器作为中继，以实现对各类小型家电的统一管理，但遗憾的是，它仅支持红外及433、315MHz等频率，面对滚码、蓝牙等新型遥控方式则显得力不从心。

躺在酒店一个念头闪过脑海：如果能将红外信号转换成射频信号，不就可以解决这个难题了吗？带着这样的想法，我在某宝上开始了搜索之旅。

不出所料，真的找到了这样一款神奇的小工具：红外转射频模块。这款小巧的模块不仅安装简便，而且功能强大，能够与多种类型（理论上只要有按钮）的遥控器连接，形成一个高效的遥控信号转发系统，而且是光耦隔离的模拟开关，安全高效。

说干就干，迅速下单，出差回到家第一件事就去拿包裹，开拆后立刻开始了我的改造。

首先将电池取出，拆解原有的遥控器，主板上只有四个微动开关和对码信号发射元件，结构异常简单，没搞懂当初为什么没有设计成红外发射的形式啊。

随后，将目光转向了红外转射频模块。这块小小的电路板上，集成了五伏电源插口、四颗指示灯、四颗学习按钮、八个接线孔以及三伏输出，还有一个红外接收器，麻雀虽小五脏俱全。

为了实现最佳效果，我决定不将其直接装入原遥控器内，而是选择重新做个外壳，并采用外部电源供电。这样一来，不仅可以摆脱传统遥控器的束缚，还能进一步提升系统的稳定性和可靠性。

接下来，便是最为关键的焊接环节。将模块的三伏电源与遥控器相连，确保其供电正常工作；再通过跳线，将模块的第一路开关与遥控器的第一个开关的触点相接，以此来模拟按键动作。尽管过程有些繁琐，但最终的结果却令人满意，测试功能一切运作正常，万能遥控器成功发送了指令，目标设备也准确无误地作出了响应。

完成初步测试后，开始考验耐心和细致的操作了。

下面就是接接接、焊焊焊！

最后找来了一个稍显粗糙但足够实用的盒子，主板安置其中，正式宣告项目完工。当我对着小爱同学发出指令时，心中充满了期待。随着一声清脆的回应和设备响应，那一刻爽爆了。更重要的是，整个改造成本低廉，模块加上运费也不过16块，超高性价比的智能家居改造。

嗯，因为非常开心，于是写篇水文记录下~ over~ 话说下旬又要出差了，天津、太原、武汉.. 唉~

看到不少博客在写这个，我也跟个风，哈哈。

1. 你的博客更新频率是多少？
比较随意，有时候工作不忙的时候会多写几篇，忙的时候可能几个月不更，不过确保一年平均下来可以每月至少一篇吧。

2. 你的博客上次更新是什么时候？
文章更新于两个月前，片刻更新于2天前。

3. 你的博客文章是原创的吗？
绝大部分都为原创，极少部分喜欢的文章或者图片会标记转载出处。

4. 你觉得自己的文章对他人有帮助吗？
或许吧，不过写文章的人总希望自己的文章可以对别人有所帮助，我也是希望在其他时间得某个点上，可以让看过我的人想起我。

5. 你上次换博客主题/程序是什么时候？
记不太清了，应该在 2016 年左右吧，从 Wordpress 换到 Typecho。

6. 你上一次捣腾博客主题代码是什么时候？
主站代码很久没有碰了，大概两三个月前优化了下片刻等页面，测试站的主题代码应该一个月前折腾过几天。

7. 你会对博客主题进行二次开发？
未来很长一段时间内不会对本站的主题进行二次开发，只会不断的优化和缩减代码量，同时一些稀奇古怪的想法和想要实现的功能都会在测试站的主题上完成，也有可能会再重新做个主题，还在构思。

8. 你多久打开自己博客自我陶醉一次？
一般情况下发表完文章的前两天会经常打开，还有就是有新评论的时候，基本上可以做到每周都浏览一次吧。

9. 你近期对自己博客域名什么感受？
域名的来历：上大学的时候一直很喜欢 ideal 这个单词，然后就结合自己的姓 J，诞生了 Jdeal 这个词，后面自己的网名也全部改成了 Jdeal，买域名的时候除了没能买到 .com 的域名有点遗憾，不过 .cn 我也很喜欢，时间很快，域名也快有十年了吧。

10. 你每天都会看网站的流量统计吗？
刚开始玩博客的时候会几乎每天都看，现在很佛系，偶尔会看，不过我的关注点是大家都是怎么找到我的站，几乎不会去关注网站的流量。

11. 你通过博客的广告赚到钱了吗？
没统计过，印象中应该在10块以内吧。不过自己花的倒是不少。

12. 你去浏览别人的博客/网站主要为什么？
一方面是为了学习新的知识，还有就是我很喜欢与众不同的网站或风格，感觉对自己的想法也会有一些帮助，会发出“咦，还可以这么玩”的感叹。

13. 看到别人分享了一篇文章，你打开第一反应是什么？
如果标题足够吸引我，会认真看完并收藏，如果是自己不太感兴趣的，会大概的过一下。

14. 你觉得博客哪方面更重要？
刚开始玩的时候觉得主题好看很重要，玩着玩着觉得主题简约大方就行了，于是开始整内容，写着写着发现内容也没什么可写的了，于是你就会发现有大量的人玩一阵子就消失了，友链也是“死”了一波又一波。其实我觉得博客哪方面都不是特别重要，除非这是你的工作，它就是一个载体，认识一群你想认识的人，有时间你就折腾，没时间你就等有时间再折腾，至于你是喜欢不停的美化主题，还是只专注于写好文章，都不重要，自己开心就行，不是嘛。

15. 近期通过写博客有哪些新收获？
看到了许多喜欢的博客，和认识了一些有趣的博主，重要的是好几位在同城市的博主，哈哈，希望有机会可以搞个线下博友见面会啊。

本文是由黎巴嫩诗人 纪伯伦 所写，其主要作品有《泪与笑》《先知》《沙与沫》等。他的作品大多以“爱”与“美”为主题，通过大胆的想象和象征的手法，表达深沉的情感和高远的理想。

你们的孩子，都不是你们的孩子，

乃是“生命”为自己所渴望的儿女。

他们是借你们而来，却不是从你们而来，

他们虽和你们同在，却不属于你们。

你们可以给他们以爱，却不可给他们以思想，

因为他们有自己的思想。

你们可以荫庇他们的身体，却不能荫庇他们的灵魂，

因为他们的灵魂，是住在“明日”的宅中，那是你们在梦中也不能想见的。

你们可以努力去模仿他们，却不能使他们来像你们，

因为生命是不倒行的，也不与“昨日”一同停留。

你们是弓，你们的孩子是从弦上发出的生命的箭矢。

那射者在无穷之中看定了目标，也用神力将你们引满，使他的箭矢迅疾而遥远地射了出去。

让你们在射者手中的“弯曲”成为喜乐吧；

因为他爱那飞出的箭，也爱了那静止的弓。

本文题目虽为《论孩子》，具体内容却是论父母之道的。父母们常忽视了教育最为重要的目标之一：培养独立人格。本诗指出孩子是独立的，是与父母平等的个体，父母只能给孩子以爱，却不能代替他们思想、灵魂的形成。

前段时间，我在捣鼓我的 [t demo.jdeal.cn]DEMO站[/t] 时，灵感如泉涌，特别是受到 若志 随笔 的启发，我决定直接将评论邮件推送功能嵌入到主题中，而非依赖插件来实现。

这一尝试虽然让我收获了不少乐趣，但也遇到了一个小问题——游客评论时，由于邮件发送是同步进行的，导致提交评论时响应有些延迟。

懒惰如我，暂时没有将同步发送改为异步的打算（毕竟，谁不想偷点懒呢？），于是我开始思考如何在等待过程中增加一些趣味元素，让用户体验不至于那么单调。

就在一次使用网易邮箱的偶然瞬间，我发现发送邮件时，那个“发送”按钮会瞬间变成纸飞机图标，并优雅地飞离，这一细节瞬间点燃了我的创意火花。于是，我决定将这份灵感融入到我的网站中，为评论按钮也添上类似的动画。

想要看看这有趣的动画吗？可以点击这里 [t demo.jdeal.cn/btn.html]评论按钮动画示例[/t]，相信你会喜欢的！

这个小动画的实现其实非常简单，它主要依赖于动画和 JavaScript 来控制元素。我已经将它成功应用到了我的测试站上，效果还不错。

当然，你也可以根据自己的需求进行修改，比如评论成功时显示对勾图标、错误时叉号等，让动画更加贴合你的网站风格。

此站评论区暂时没有上线该功能，感兴趣的朋友可以直接访问 [t demo.jdeal.cn/btn.html]评论按钮动画示例[/t]，查看源码使用，记得根据自己的具体需求进行适当的修改哦！

在小红书的某个角落，我偶然发现一张看似普通的 HUAWEI 手表分享，吸引我的不是表，而是它的壁纸，那句直击心灵的共鸣之音——“还不下班？振作，现在是几点几分”，让我为之一振，哈哈。

这张壁纸，带着几分调侃，几分无奈，却意外地触动了无数职场人的心弦。

我开始疯狂的寻找这张壁纸，但是无从得知，而且好像也无法直接使用，Apple Watch “照片”、“人像”两种表盘可以用照片作为壁纸，但是时间位置都不对。最后想着要不自己照着画吧，毕竟也不复杂，慢慢画，然后按照 Apple Watch 的时间位置做调整，花了半小时吧，终于搞定。

当我第一次将这张壁纸设置为自己的 Apple Watch 表盘背景时，或许只是想要给自己一个幽默的提醒，让忙碌的工作间隙多一丝轻松，或许是真的自己很无聊，哈哈。然而，当我将这份小幽默分享到小红书上时，却意外地引发了一场关于“上班”的大讨论。

私信里，来自五湖四海的声音汇聚成一股洪流，或抱怨、或自嘲、或共鸣，但共同的主题却都是：“我也不爱上班”、“我也想要这个壁纸”，起初，我兴奋地一一回复，感觉自己要火了，哈哈。

然而，故事的高潮来了，当阅读量破1w+时，小红书误以为我是个自动发送信息的机器人，于是，我的私信功能被封一周，这对于一个正沉浸在分享喜悦中的人来说，无疑是一个小小的打击。看着列表里不停弹出来的私信，我无能无力，并且被封时我大概已经回复了五六百人的私信里，感觉好累。想了一会，想到了个更有效的解决方案：建立一个分享群，自取！

这个群迅速壮大，从最初的几位，到现在已经汇聚了三百多位来自各地的小红薯，我们不仅共享壁纸，还交流使用技巧。

原来，在这个快节奏的社会里，不仅是我，还有千千万万的职场人，都在为生活奔波的同时，怀揣着对下班时刻的无限向往。

所以，如果你也厌倦了无休止的加班和忙碌的工作，试着在忙碌与压力中寻找点乐趣和平衡，也许你会更快乐。

此文章为广告，帮我发小打个小广告~

在今天这个快节奏的数字时代，每一家企业都在寻求通过云计算的力量来加速其业务转型。想象一下，与一个拥有深厚技术底蕴的服务商合作，能够轻松穿梭于阿里云、腾讯云、华为云及AWS等顶级云平台之间，为您量身打造无缝的上云之旅，这样的合作伙伴正是您迈向成功的加速器。

服务亮点包括：

多云管理与运维：无论是公有云、私有云还是混合云环境，我们都能提供全方位的管理和运维服务。自主研发的多云管理平台让复杂的多云环境变得易于操控，确保您的业务在云上的高效运行。

云迁移与咨询服务：从前期的云战略规划到迁移执行，再到后续的持续优化，我们提供一站式的迁移服务，确保过程平滑无阻。我们的专家团队将基于您的业务需求，量身定制最适合的云迁移路径。

安全保障：在享受云端便利的同时，我们深知安全的重要性。因此，提供深度渗透测试、系统加固、安全托管等服务，确保您的业务坚如磐石。我们的应急响应机制能在第一时间为您保驾护航。

定制化解决方案：针对教育、医疗、制造、互联网等不同行业的需求，我们提供定制化的云解决方案。从钉钉组织数字化到SD-WAN组网，每一个细节都精心设计，以满足您的独特业务需求。

24/7专业支持：凭借遍布多个城市的运维团队，我们承诺全天候的技术支持，无论是基础问题还是紧急故障，都能迅速响应，让您无忧上云。

选择与我们携手，意味着选择了与一群拥有超过150项专业云认证、超过15年企业云服务经验的核心团队并肩作战。我们已成功为超1000家企业提供服务，管理着超过10万台云服务器，实力见证每一次云端飞跃。

想要了解更多如何通过云计算优化您的业务？欢迎深入了解，开启您的数字化转型之旅，让云端的无限可能成为您的竞争优势。与我们联系，探索专属于您的云上蓝图。

如果您有任何云产品业务的需求，找她都行，即使问个价也可以的，小姐姐人超好的。对了，记得提 Jdael 打骨折。。。hah，是我从小玩到大的发小哦，欢迎咨询哈~

去年，同事分享给我一个小红薯上的视频，让我给她整个，一直无力研究，近期看了看，问题很多。

虽然视频的内容颇具吸引力，但遗憾的是，作者并未提供详细的制作教程。

控制器、门锁以及其他电子元器件，型号尺寸一概不知，面对这一挑战，我决定根据视频中的展示，自行设计并实现类似的功能。

首要选择的硬件平台是 ESP8266 开发板、开关按钮、Led 灯带、延时继电器、电磁阀门锁，ESP 还有个好处，其内置Wi-Fi模块可实现设备联网，还可进行远程控制。结合Arduino编程环境，可以灵活定制设备的控制逻辑，同时还可写个 WEB 虚拟界面进行远程控制~

以下是原视频：

鉴于项目规模和复杂性，计划先采购小型开发板及少路继电器进行初步模拟实验，逐步验证各部分功能的可行性。考虑到个人业余时间有限，预计整个项目的完成可能需要半年至一年的时间。

本文记录了对该项目的初步构想与筹备过程，未来随着实际操作的推进，将持续更新进度，以此督促自己。

希望最终不要翻车，哈哈~

故事要从我在小红薯上邂逅的一款“暗黑趣味”的 Apple Watch 表盘说起。初见之下，那份独特的恶趣味让我跃跃欲试，果断动手仿制了一个。

然而，新鲜劲儿一过，我却陷入了“美则美矣，毫无灵魂”的尴尬境地。于是乎，我向我的时尚顾问兼科技发烧友朋友求救。她的第一反应？“丑拒！”好吧，审美这事儿果然见仁见智。

不过，接下来她的建议倒是让我眼前一亮：何不尝试分时段自动更换表盘，让手表随心所欲地在“职场模式”与“休闲模式”间自由切换？

原计划我打算借助iOS自带的快捷指令，设定早晚上下班时间自动更换表盘。但转念一想，这岂不是让周末宅家的我也得被迫承受“职场压抑感”？

显然，我需要一种更贴心的切换方式。就在灵光乍现的0.01秒内，我找到了答案：利用定位功能，让表盘随我行踪而变！

于是，通过快捷指令里的自动化规则：当 Apple Watch 感知我踏入公司方圆百米的“势力范围”，立即换上那款充满“打工人DNA”的丧丧表盘，仿佛在提醒我：“干活啦，社畜！”

而当我潇洒挥手告别格子间，距离公司超过百米时，表盘瞬间切换为活力四溢的“下班快乐版”，仿佛在欢呼：“解放啦，自由人！”至于温馨的家门附近，自然也设定了专属表盘，或许是一片宁静星空，或许是动漫角色，用以迎接我卸下疲惫、回归自我的时刻。

如此一来，我新表盘为平淡日常增添了一份别致的乐趣。当然，玩法远不止于此，你可以尽情发挥创意，为每一个特殊地点、重要事件甚至是心情波动定制独一无二的表盘。

收工！又“划水”了一篇文章！手动狗头

昨晚，我习惯性地打开手机浏览个人博客，在暗黑环境下访问时，我发现博客的暗黑模式存在不少问题，诸如色彩反转不协调、细节处理不到位等现象尤为明显。

面对这些问题，我在0.01+秒短暂思考后做出决定：今天移除暗黑模式的相关代码。之所以如此决定，主要是考虑到修复这些细节问题需要投入大量时间和精力进行校对，而我个人对此缺乏足够的耐心。

尽管此前我利用 @media(prefers-color-scheme:dark) 的 CSS 选择器实现了暗黑模式的快速切换，但这种方法要求对每一个细微之处都进行精准调整，而这对我来说是一项颇为繁重的任务。

考虑到暗黑模式的核心诉求是降低屏幕亮度以保护视力，我设想了一种更为简易的解决方案：添加一个按钮，点击后在页面上覆盖一层透明度为30%的黑色遮罩，并设置其pointerEvents属性为none，使鼠标可以穿透。这样，用户只需一键操作即可达到近似暗黑模式的效果。

然而，经过实践后我发现此方法趣味性不足，且仅适用于采用AJAX交互的网站，否则页面跳转后遮罩会消失，实用性受限。

在进一步回忆和探索中，我想到了iPhone手电筒亮度调节的设计，试图借鉴其理念对上述方案进行优化。所以并编写了一段JS代码以实现类似的功能，就是为博客添加了一个按钮，并在按钮中分布了四个亮度的格子可以控制不同亮度的遮罩。

不废话，直接开搞：

<span id="light-control">light-control</span>

页面先增加一个按钮，再来一段乱七八糟的js：

<script>
document.addEventListener('DOMContentLoaded', function () {
  const lightControlButton = document.getElementById('light-control');
  let currentOpacity = 0.1;
  let isLightControlActive = false;
  let timerId;
  function createLightControl() {
    const existingMask = document.querySelector('.dark-mask');
    if (existingMask) {
      existingMask.remove();
    } else {
    const mask = document.createElement('div');
    mask.className = 'dark-mask';
    mask.style.opacity = currentOpacity;
    Object.assign(mask.style, {
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      backgroundColor: '#000',
      zIndex: '999',
    });
    document.body.appendChild(mask);
    const controlBar = document.createElement('div');
    controlBar.className = 'light-control-bar';
    Object.assign(controlBar.style, {
      border: '1px #b9b9b9 solid',
      position: 'fixed',
      top: '50%',
      left: '50%',
      transform: 'translate(-50%, -50%)',
      width: '88px',
      height: '200px',
      backgroundColor: '#fff',
      borderRadius: '25px',
      zIndex: '1000',
      overflow: 'hidden',
    });
    document.body.appendChild(controlBar);
    const opacityValues = [0.2, 0.4, 0.6, 0.7];
    for (let i = 0; i < 4; i++) {
      const cell = document.createElement('div');
      cell.className = 'light-cell';
      cell.style.width = '100%';
      cell.style.height = '50px';
      cell.style.backgroundColor = '#000';
      cell.style.opacity = `${opacityValues[i]}`;
      cell.addEventListener('click', () => {
        currentOpacity = opacityValues[i];
        mask.style.opacity = currentOpacity;
        clearTimeout(timerId);
        timerId = setTimeout(() => {
          if (!isLightControlActive) {
            controlBar.remove();
            mask.style.pointerEvents = 'none';
            isLightControlActive = false;
          }
        }, 3000);
      });
      controlBar.appendChild(cell);
    }}
  }
  lightControlButton.addEventListener('click', createLightControl);
});
</script>

然而，在实际操作过程中，我发现代码量超出预期，甚至超过了之前删除的暗黑模式CSS代码，考虑到此举违背了我网站精简的初衷，最终选择放弃了进一步的尝试和调整。

再经历了启用、反思、尝试改进，再到看到这篇文章时，我还是把这个功能撤掉，美其美曰，网站精简！哈哈！

啊！又是愉快的瞎折腾的一天~

当然，效果预览我也做在了当前页面，由于ajax缘故，需要刷新一下当前页面才可以触发函数，刷新当前页面后可以点击下方的灯泡小小的试玩一下~

当然可以！当然可以！当然可以！

洗发水直接“上头”，是不会导致脱发滴！山寨的不保证

只要是正规洗发水产品，其原始浓度下对皮肤的刺激性非常小，不用担心直接抹头皮会刺激毛囊而引起脱发。

退一步说，洗发水就是为了清洁头发和头皮的油垢、头屑等。

不洗头皮，岂不等于没洗?

来源：丁香生活研究所

前段时间闲来无事，在家翻抽屉，无意间找出一堆过期的核酸检测试剂盒。这些玩意儿以前天天见，现在都过期了，留几个作纪念，其他的就扔了吧。

带到公司后，我就寻思着怎么利用一下。公司以前上下班刷胸卡，现在改刷脸了，胸卡基本就剩吃饭、逛罗森便利店和公司停车场开门时用用，整天揣着挺麻烦的。我琢磨着，能不能把胸卡塞进试剂盒里，做个挂件，既方便又好玩。

[img][/img]

动手试试吧！结果发现胸卡上的线圈太大，塞不进去。那就某多多买个小点的线圈移植换上，前前后后试了俩才找到合适的。

接着，我在试剂盒上画了两条红杠（搁一年前，这可是人人害怕的“中奖”标志），现在倒成了装饰。

[img][/img]

再给试剂盒顶上钻个孔，找个回形针弯成环，从抽屉里翻出个钥匙扣挂上，搞定！胸卡摇身一变，成了个试剂盒挂件，OK，完美，哈哈。

这还不算完，我突然又想到还有个闲置的U盘，要不再捯饬捯饬？

说干就干，半小时后，U盘也成功改造，谁说旧物没用？动动脑筋，废物也能变成宝！哈哈~

[img][/img]

过期的核酸检测试剂盒不要着急扔，让它们在新的岗位上继续发光发热。生活嘛，有时候就得有点创意，有点乐趣！😂

年后手头的事儿松了松绑，突然闲得有点痒痒，琢磨着是不是该给我的博客换个新装。不过转念一想，“哎呀，算了吧，现在这样也挺顺眼的。”可这颗不安分的心哪肯轻易罢休，总想捣鼓点什么才舒坦。

于是乎，我心血来潮，划水摸鱼搞起——搭个测试站点！

用上了Typecho的最新版，配上PHP 8.3，准备大干一场。我的折腾法子嘛，简单粗暴又直接，自带的Default主题，抡起代码大锤就是一顿“删删改改”大作战，一边乐呵呵地剔除冗余的CSS，一边洋洋洒洒地添砖加瓦。

主要捣鼓了：

评论随心所欲：甭管你在首页溜达，还是钻进归档翻旧账，只要瞅见短文分类，就能立马“开麦”评论，甭提多方便！

九宫格图片秀：纯CSS打造的九宫格布局，美图们整整齐齐排排坐，点哪个蹦出哪个的大弹窗，全靠我那几行蹩脚的JS。

样式大换血：至于那些个CSS调整，多了去了！

可谁承想，人呐，就是这么矛盾。评论捣鼓了几个版本：一是对话气泡风，看着跟聊天记录似的亲切；二是仿朋友圈留言，按时间线规规矩矩排好队；三是改良版默认组件，简洁明了。捯饬到最后，我自己都懵圈了：“诶？我到底要哪款来着？”

捣鼓了几天，灵感仿佛被我榨干了，对着屏幕发呆：“难不成这就没啥可倒腾的了？”

嘿，屏幕前的各位大神、脑洞达人，快快支个招吧！甭管多离谱、多奇葩的想法，只要你们抛过来，我保准接住，权当消遣娱乐，继续我这场“改造狂欢”！

对了，这是 [t demo.jdeal.cn]我的测试站[/t]

*ps 目前本测试站仅作为功能及样式测试，不作为个人站使用，其实就是无聊时自己玩耍的小玩具。🤣