发布作者: _北海彡
百度收录: 正在检测是否收录...
最后更新: 2025年 03月 02日 16:12
作品采用: 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
搓了一个随机一言web小组件,UI不错,还有刷新按钮,不错。有能力的二改让它变得更完美发到评论区贡献一下.
https://lgnb.asia/admin/demo/147-yiyan
摘点多余部分,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>
不错 拿走了
?语言类评语?
文章结构紧凑,层次分明,逻辑严密,让人一读即懂。