网站装饰及优化

oneLN

2024-03-24

随手记

页脚小标

<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>

鼠标效果

</style>
<!-- 网页特效 - 樱花 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>

<!-- 网页鼠标点击特效 - 爱心 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>

<!-- 网页鼠标点击特效 - 烟花波纹 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yanhuabowen.js"></script>

<!-- 鼠标特效 - 小星星拖尾 -->
<span class="js-cursor-container"></span>
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/xiaoxingxing.js"></script>

免费天气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>

open天气

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气信息</title>
    <style>
        #weather {
            font-family: 'Arial', sans-serif;
            text-align: center;
            padding: 00px;
        }

        #temperature {
            font-size: 2em;
            color: #ff8c00;
        }

        #description {
            font-size: 1.5em;
            color: #6a5acd;
        }
    </style>
</head>
<body>
    <div id="weather">
        <h2 id="city"></h2>
        <div id="temperature"></div>
        <div id="description"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    const lat = position.coords.latitude;
                    const lon = position.coords.longitude;
                    const apiKey = '3f397c5384d998ddb8269337b4a6bbd3';
                    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&lang=zh_cn&units=metric`;

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById('city').textContent = data.name;
                            document.getElementById('temperature').innerHTML = `${data.main.temp} °C`;
                            document.getElementById('description').textContent = data.weather[0].description;
                        })
                        .catch(error => console.error('Error:', error));
                }, () => {
                    alert('无法获取您的位置信息。');
                });
            } else {
                alert('您的浏览器不支持地理位置功能。');
            }
        });
    </script>
</body>
</html>

<iframe scrolling="no" src="https://widget.tianqiapi.com/?style=tq&skin=pitaya" frameborder="0" width="100%" height="60" 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>