累计撰写 38 篇文章
累计添加 13 个标签
累计收到 223 条评论

随机一言精美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赞

打赏

发布作者： _北海彡

百度收录：正在检测是否收录...

最后更新： 2025年 03月 02日 16:12

本文链接： https://lgnb.asia/index.php/archives/147/

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

—— 评论区 ——

1814081081
Android 11 ViVO浏览器 23

2025年03月01日 20:56 回复

不错拿走了
upkhcvzhpk
Windows 10 x64 Edition 搜狗高速浏览器

2025年03月02日 12:17 回复

?语言类评语?
ncgarxmsvr
Windows 10 x64 Edition 搜狗高速浏览器

2025年03月02日 22:34 回复

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