侧边栏壁纸

随机一言精美UIweb小组件

2025年03月01日 90阅读 3评论 3点赞

搓了一个随机一言web小组件,UI不错,还有刷新按钮,不错。有能力的二改让它变得更完美发到评论区贡献一下.

演示


https://lgnb.asia/admin/demo/147-yiyan

随机一言演示图片

HTML代码

摘点多余部分,css和html复制到相应位置即可使用.

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机一言</title>
    <style>
        /* 卡片容器 */
        .yiyan-card {
            width: 90%;
            max-width: 400px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 20px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        /* 头部样式 */
        .yiyan-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            background: rgba(255, 235, 59, 0.7);
            border-bottom: 2px solid rgba(255, 193, 7, 0.7);
        }

        .yiyan-header img {
            width: 30px;
            height: 30px;
        }

        .yiyan-title {
            font-size: 20px;
            font-weight: bold;
            margin-left: 10px;
            color: #333;
        }

        /* 徽标样式 */
        .badge-container {
            display: flex;
            gap: 8px;
        }

        .layui-badge-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .layui-bg-orange {
            background: #ff9800;
        }

        .layui-bg-green {
            background: #4caf50;
        }

        .layui-bg-blue {
            background: #2196f3;
        }

        /* 内容区域 */
        .yiyan-body {
            padding: 20px;
            text-align: center;
        }

        .yiyan-text {
            font-size: 18px;
            line-height: 1.5;
            color: #555;
            margin-bottom: 20px;
        }

        /* 刷新按钮 */
        .refresh-btn {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 235, 59, 0.7);
            border: none;
            cursor: pointer;
            outline: none;
            transition: transform 0.3s ease-in-out;
        }

        .refresh-btn:hover {
            transform: rotate(360deg);
        }

        .refresh-btn img {
            width: 24px;
            height: 24px;
        }
    </style>
      <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">    
</head>

<body>
<script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <div class="yiyan-card">
        <div class="yiyan-header">
            <div>
                <img src="/admin/img/yiyan.svg" alt="随机一言">
                <span class="yiyan-title">随机一言</span>
            </div>
            <div class="badge-container">
                <span class="layui-badge-dot"></span>
                <span class="layui-badge-dot layui-bg-orange"></span>
                <span class="layui-badge-dot layui-bg-green"></span>
            </div>
        </div>
        <div class="yiyan-body">
            <div id="yiyan" class="yiyan-text"></div>
            <button class="refresh-btn" onclick="fetchYiyan()">
                <img src="/admin/img/shuaxin.svg" alt="刷新">
            </button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        function fetchYiyan() {
            axios.get('https://cn.apihz.cn/api/yiyan/api.php?id=88888888&key=88888888')
                .then(response => {
                    const data = response.data;
                    if (data.code === 200) {
                        document.getElementById('yiyan').innerText = data.msg;
                    } else {
                        document.getElementById('yiyan').innerText = '获取失败';
                    }
                })
                .catch(error => {
                    console.error('Error fetching yiyan:', error);
                    document.getElementById('yiyan').innerText = '获取异常';
                });
        }
        // Fetch yiyan on page load
        fetchYiyan();
    </script>
</body>

</html>
3
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
  1. 头像
    1814081081
    Android 11   ViVO浏览器 23
    回复

    不错 拿走了

  2. 头像
    upkhcvzhpk
    Windows 10 x64 Edition   搜狗高速浏览器
    回复

    ?语言类评语?

  3. 头像
    ncgarxmsvr
    Windows 10 x64 Edition   搜狗高速浏览器
    回复

    文章结构紧凑,层次分明,逻辑严密,让人一读即懂。

人生倒计时
舔狗日记

海云博客公告

海云博客、云服务、API、霹雳霹雳、百宝箱、LGZ、影视、卡密网等由于特殊原因将于2025年3月-6月末暂时停更停维护



博客先这样吧,在搞子比很快就好了
欢迎!
一天只弹一次
朕已阅

Warning: Invalid argument supplied for foreach() in /www/wwwroot/mnbt.20739403/usr/plugins/Clogin/Plugin.php on line 158