网站装饰及优化

随手记
96

网站

页脚小标

<div class="tp-ad-text1">
       <a href="https://halo.oneln.org/" title="同款网站搭建" target="_blank">oneLN</a>
<a href="https://halo.oneln.org/" title="oneLN" target="_blank">oneLN</a>

本站满天星

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>星空背景效果和获取IP地址</title>
  <style>
    body {
        margin: 0;
        padding: 0;
        /* Remove or adjust overflow property */
        /* overflow: hidden; */
        overflow-y: auto; /* Only hide horizontal overflow */
    }

    .star {
        position: absolute;
        background-color: white;
        border-radius: 50%;
    }

    /* 设置星星的闪烁动画 */
    @keyframes twinkling {
        0% { opacity: 0; }
        50% { opacity: 1; }
        100% { opacity: 0; }
    }
  </style>
</head>
<body>
    <!-- 生成多个星星 -->
    <script>
        // 生成随机数
        function randomBetween(min, max) {
            return Math.random() * (max - min) + min;
        }

        // 创建星星
        function createStar() {
            var star = document.createElement("div");
            star.className = "star";

            // 设置星星的位置和大小
            var size = randomBetween(1, 2); // 调整星星的大小范围
            star.style.width = size + "px";
            star.style.height = size + "px";
            star.style.left = randomBetween(0, window.innerWidth) + "px";
            star.style.top = randomBetween(0, window.innerHeight) + "px";

            // 设置星星的动画
            var duration = randomBetween(3, 6); // 调整星星的闪烁速度
            star.style.animation = "twinkling " + duration + "s infinite";

            // 将星星添加到页面中
            document.body.appendChild(star);
        }

        // 创建多个星星
        function createStars() {
            var numberOfStars = Math.floor(window.innerWidth * window.innerHeight / 10000); // 根据屏幕尺寸调整星星的数量
            for (var i = 0; i < numberOfStars; i++) {
                createStar();
            }
        }

        // 页面加载完成后创建星星
        window.onload = createStars;

        // 当窗口大小改变时重新生成星星，以适应屏幕旋转等情况
        window.onresize = function() {
            // 清空页面上的所有星星
            var stars = document.querySelectorAll('.star');
            stars.forEach(function(star) {
                star.remove();
            });
            // 重新生成星星
            createStars();
        };
    </script>
</body>
</html>

免费天气api（http://www.tianqi.com/plugin/）

<iframe scrolling="no" src="https://widget.tianqiapi.com/?style=tq&skin=pitaya" frameborder="0" width="100%" height="25" allowtransparency="true"></iframe>

IP自动识别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获取IP地址</title>
</head>
<body>
  <p id="ip-address">正在获取您的IP地址...</p>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
          document.getElementById('ip-address').innerText = "您的IP地址是: " + data.ip;
        })
        .catch(error => console.error('Error fetching IP address:', error));
    });
  </script>
</body>
</html>

灯笼特效

<script src="https://cdn.jsdelivr.net/gh/no2y/jslib@main/lanterns/lanterns.min.js"></script>

文章优化 源项目（https://github.com/vinta/pangu.js）

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    pangu.autoSpacingPage();
  });
</script>