每日古诗一言组件

三月 25, 2025 / Mr.x / 5阅读 / 0评论/ 分类: 创意卡片类
每日古诗一言组件详解 | xgr.cab
HTML CSS JavaScript

每日古诗一言组件

古风诗词卡片组件，支持随机切换、日期显示和背景图片轮播

Live Demo

换一句

组件特点

  • 每日自动显示当前日期（年月日）
  • 随机展示古诗词句，点击可切换
  • 背景图片轮播，营造古风氛围
  • 竖排文字显示，符合古诗词阅读习惯
  • 悬停动画效果，提升交互体验

实现原理

这个组件结合了 HTML 结构、CSS 样式和 JavaScript 逻辑，实现了一个完整的古诗词展示卡片。

📌 核心功能

组件使用 writing-mode: vertical-rl 实现竖排文字，配合背景图片和渐变遮罩，营造出古典雅致的视觉效果。

1. HTML 结构

组件采用分层结构，包含日期显示区、诗词展示区和操作按钮区：

HTML 
<div class="wiiuii-suiji-main">
    <div class="wiiuii-suiji-header">
        <div class="xingyu-dt-ty">
            <span class="xingyu-dt-day">25</span>
            <p class="xingyu-sj-date">
                <span>2026年</span>
                <span>03月</span>
            </p>
        </div>
        <div class="xingyu-sjzt-ty">
            <span>休对故人思故国...</span>
        </div>
    </div>
    <div class="xingyu-sjtitle-ty">
        <span>换一句</span>
    </div>
</div>

2. CSS 样式

关键样式包括竖排文字、背景图片处理和渐变遮罩：

CSS 
/* 竖排文字 */
.xingyu-sjzt-ty {
    writing-mode: vertical-rl;
    line-height: 32px;
    letter-spacing: 4px;
}

/* 背景图片 */
.wiiuii-suiji-main {
    background-size: cover;
    background-position: center;
    height: 320px;
}

/* 渐变遮罩 */
.wiiuii-suiji-main::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

3. JavaScript 逻辑

JS 负责日期计算、随机诗词选择和背景图片切换：

JavaScript 
// 诗词库
var wiiuiiYiYan = [
    '休对故人思故国，且将新火试新茶。诗酒趁年华。',
    '山中何事？松花酿酒，春水煎茶。',
    '最是人间留不住，朱颜辞镜花辞树。'
];

// 背景图片库
var wiiuiiYiYanBg = [
    'https://img.xgr.cab/uploads/2024/09/10/227.webp',
    'https://img.xgr.cab/uploads/2024/09/10/262.webp'
];

// 随机选择函数
function wiiuiiRanYiYin() {
    var yiIndex = Math.floor(Math.random() * wiiuiiYiYan.length);
    var bgIndex = Math.floor(Math.random() * wiiuiiYiYanBg.length);
    
    document.querySelector('.xingyu-yiyin').textContent = wiiuiiYiYan[yiIndex];
    document.querySelector('.wiiuii-suiji-main').style.backgroundImage = 
        'url(' + wiiuiiYiYanBg[bgIndex] + ')';
}

完整代码

HTML 
<div class="wiiuii-suiji-main">
    <div class="wiiuii-suiji-header">
        <div class="xingyu-dt-ty">
            <span class="xingyu-dt-day wiiuiiDay"></span>
            <p class="xingyu-sj-date">
                <span class="wiiuiiYear"></span>
                <span class="wiiuiiMonth"></span>
            </p>
        </div>
        <div class="xingyu-sjzt-ty">
            <span class="xingyu-yiyin"></span>
        </div>
    </div>
    <div class="xingyu-sjtitle-ty">
        <span id="xingyuQhBtn">换一句</span>
    </div>
</div>
CSS 
.wiiuii-suiji-main {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    height: 320px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.wiiuii-suiji-header {
    display: flex;
    justify-content: space-between;
}

.xingyu-dt-ty {
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.xingyu-dt-day {
    font-size: 60px;
    font-weight: 700;
    color: #fff;
}

.xingyu-sj-date {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.xingyu-sjzt-ty {
    line-height: 25px;
    height: 200px;
    writing-mode: vertical-rl;
    padding: 15px;
    color: #fff;
    font-size: 15px;
}

.xingyu-sjtitle-ty {
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
    padding: 5px;
}

.xingyu-sjtitle-ty span:hover {
    color: #f44336;
}
JavaScript 
var wiiuiiYiYan = [
    '休对故人思故国，且将新火试新茶。诗酒趁年华。——宋苏轼《望江南》',
    '山中何事？松花酿酒，春水煎茶。——元张可久《人月圆》',
    '最是人间留不住，朱颜辞镜花辞树。——清·王国维《蝶恋花》'
];

var wiiuiiYiYanBg = [
    'https://img.xgr.cab/uploads/2024/09/10/227.webp',
    'https://img.xgr.cab/uploads/2024/09/10/262.webp'
];

var wiiuiiYiMain = document.querySelector('.wiiuii-suiji-main');
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();

document.querySelector('.wiiuiiDay').textContent = day;
document.querySelector('.wiiuiiMonth').textContent = (month < 10 ? '0' : '') + month + '月';
document.querySelector('.wiiuiiYear').textContent = date.getFullYear() + '年';

function wiiuiiRanYiYin() {
    var yiIndex = Math.floor(Math.random() * wiiuiiYiYan.length);
    var bgIndex = Math.floor(Math.random() * wiiuiiYiYanBg.length);
    document.querySelector('.xingyu-yiyin').textContent = wiiuiiYiYan[yiIndex];
    wiiuiiYiMain.style.backgroundImage = 'url(' + wiiuiiYiYanBg[bgIndex] + ')';
}

wiiuiiRanYiYin();

document.querySelector('#xingyuQhBtn').onclick = wiiuiiRanYiYin;
document.querySelector('.xingyu-yiyin').onclick = function() {
    var text = this.textContent.split('。')[0];
    window.open('https://so.gushiwen.cn/search.aspx?value=' + encodeURIComponent(text));
};

浏览器兼容性

writing-mode: vertical-rl 已被所有现代浏览器支持，包括 Chrome、Firefox、Safari 和 Edge。

评论