网站LOGO
oneLN
页面加载中
11月11日
网站LOGO oneLN
时间就是力量,你的时间就是你的力量
菜单
网站装饰及优化
正文
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    网站装饰及优化
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    网站装饰及优化

    oneLN · 原创 ·
    网站 · 装饰
    共 6368 字 · 约 1 分钟 · 305

    页脚小标

    bash 代码:
    <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>

    本站满天星

    html 代码:
    <!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>

    鼠标效果

    css 代码:
    </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/

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

    open天气

    bash 代码:
    <!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自动识别

    bash 代码:
    <!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>

    灯笼特效

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

    文章优化 源项目

    bash 代码:
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        pangu.autoSpacingPage();
      });
    </script>
    声明:本文由 oneLN(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    2

    条评论
    我要发表评论
    1. 头像
      dqfefqccpq
      • 等级:Lv.1
      • 角色:访客
      • 在线:本月

      你的才华横溢,让人敬佩。http://www.hskuwan.com

    2. 头像
      gmnnmzlyxb
      • 等级:Lv.1
      • 角色:访客
      • 在线:本周

      你的文章让我学到了很多知识,非常感谢。http://www.whjqjz.com

    博客logo oneLN 时间就是力量,你的时间就是你的力量
    MOEICP 20240256

    💻️ oneLN 6天前 在线

    正在获取您的IP地址... 来访 人次, 查阅 次, 本页查阅

    🕛

    本站已运行 1 年 135 天 1 小时 51 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    oneLN. © 2023 ~ 2024.
    网站logo

    oneLN 时间就是力量,你的时间就是你的力量