当前位置：首页 > news >正文

pc端小卡片功能-原生JavaScript金融信息与节日日历

news 来源：原创 2025/6/3 19:20:11

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>金融信息与节日日历</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;}body {background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);color: #333;line-height: 1.6;padding: 20px;min-height: 100vh;}.container {max-width: 1200px;margin: 0 auto;}header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;flex-wrap: wrap;gap: 15px;}.logo {display: flex;align-items: center;gap: 12px;}.logo h1 {font-size: 1.8rem;font-weight: 600;color: #2c3e50;}.logo i {font-size: 2.2rem;color: #3498db;}.date-display {background: #fff;padding: 10px 20px;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);font-size: 1.1rem;font-weight: 500;color: #2c3e50;}.dashboard {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 25px;margin-bottom: 30px;}.card {background: #fff;border-radius: 16px;box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);padding: 25px;transition: transform 0.3s ease, box-shadow 0.3s ease;}.card:hover {transform: translateY(-5px);box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);}.card-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #eee;}.card-title {font-size: 1.3rem;font-weight: 600;color: #2c3e50;}.card-link {color: #3498db;text-decoration: none;font-size: 0.9rem;font-weight: 500;}.card-link:hover {text-decoration: underline;}/* Weather Card */.weather-card {background: linear-gradient(135deg, #3498db 0%, #1a5f9e 100%);color: white;}.weather-card .card-title,.weather-card .card-link {color: rgba(255, 255, 255, 0.9);}.weather-content {display: flex;justify-content: space-between;align-items: center;}.weather-info h2 {font-size: 2.2rem;margin-bottom: 5px;}.weather-info p {margin-bottom: 8px;opacity: 0.9;}.weather-icon {font-size: 4.5rem;opacity: 0.9;}.rain-alert {background: rgba(255, 255, 255, 0.15);padding: 10px 15px;border-radius: 10px;margin-top: 15px;font-size: 0.95rem;}/* Market Card */.market-table {width: 100%;border-collapse: collapse;}.market-table th {text-align: left;font-weight: 600;color: #7f8c8d;font-size: 0.9rem;padding: 8px 0;border-bottom: 1px solid #eee;}.market-table td {padding: 10px 0;border-bottom: 1px solid #f5f7fa;}.market-table tr:last-child td {border-bottom: none;}.index-name {font-weight: 500;}.index-value {font-weight: 600;color: #2c3e50;}.positive {color: #27ae60;font-weight: 600;}.negative {color: #e74c3c;font-weight: 600;}/* Calendar Card */.calendar-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}.month-year {font-size: 1.2rem;font-weight: 600;color: #2c3e50;}.week-days {display: grid;grid-template-columns: repeat(7, 1fr);text-align: center;font-weight: 600;color: #7f8c8d;margin-bottom: 10px;}.calendar-grid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 8px;}.calendar-day {height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 10px;font-weight: 500;cursor: pointer;transition: all 0.2s ease;}.calendar-day:hover {background: #f0f7ff;}.other-month {color: #bdc3c7;}.today {background: #3498db;color: white;}.holiday {background: #e74c3c;color: white;position: relative;}.holiday::after {content: "";position: absolute;top: 3px;right: 3px;width: 6px;height: 6px;background: #f1c40f;border-radius: 50%;}/* Festival Card */.festival-card {background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);color: white;}.festival-card .card-title {color: rgba(255, 255, 255, 0.95);}.festival-name {font-size: 1.8rem;margin-bottom: 15px;text-align: center;}.customs-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: 15px;margin-top: 20px;}.custom-item {background: rgba(255, 255, 255, 0.15);padding: 15px;border-radius: 12px;text-align: center;font-weight: 500;transition: transform 0.3s ease;}.custom-item:hover {transform: translateY(-3px);background: rgba(255, 255, 255, 0.25);}.custom-icon {font-size: 2rem;margin-bottom: 10px;display: block;}footer {text-align: center;margin-top: 30px;padding: 20px;color: #7f8c8d;font-size: 0.9rem;}@media (max-width: 768px) {.dashboard {grid-template-columns: 1fr;}header {flex-direction: column;align-items: flex-start;}}</style>
</head>
<body><div class="container"><header><div class="logo"><i class="fas fa-chart-line"></i><h1>金融信息与节日日历</h1></div><div class="date-display"><i class="fas fa-calendar-alt"></i> 2025年5月31日 星期六</div></header><div class="dashboard"><!-- Weather Card --><div class="card weather-card"><div class="card-header"><h2 class="card-title">天气预报</h2><a href="#" class="card-link">查看完整预报 <i class="fas fa-arrow-right"></i></a></div><div class="weather-content"><div class="weather-info"><h2>福州市</h2><p>5月31日 早上好</p><p><i class="fas fa-temperature-high"></i> 27℃</p></div><div class="weather-icon"><i class="fas fa-sun"></i></div></div><div class="rain-alert"><i class="fas fa-cloud-rain"></i> 预计星期二将有4-6mm的降雨</div></div><!-- Market Card --><div class="card"><div class="card-header"><h2 class="card-title">金融市场</h2><a href="#" class="card-link">查看市场 <i class="fas fa-arrow-right"></i></a></div><table class="market-table"><thead><tr><th>指数名称</th><th>涨跌幅</th><th>点数</th></tr></thead><tbody><tr><td class="index-name">上证指数 000001</td><td class="negative">-0.47%</td><td class="index-value">3,347.49</td></tr><tr><td class="index-name">深证成指 399001</td><td class="negative">-0.85%</td><td class="index-value">10,040.63</td></tr><tr><td class="index-name">创业板指 399006</td><td class="negative">-0.96%</td><td class="index-value">1,993.19</td></tr><tr><td class="index-name">USD/CNY美元人民币</td><td class="positive">+0.19%</td><td class="index-value">7.1991</td></tr><tr><td class="index-name">恒生指数 HSI</td><td class="negative">-1.20%</td><td class="index-value">23,289.77</td></tr><tr><td class="index-name">中证1000 000852</td><td class="negative">-1.03%</td><td class="index-value">6,026.56</td></tr><tr><td class="index-name">富时中国A50 XIN9</td><td class="negative">-0.44%</td><td class="index-value">13,364.65</td></tr></tbody></table></div><!-- Calendar Card --><div class="card"><div class="card-header"><h2 class="card-title">日历</h2><a href="#" class="card-link">查看更多节日 <i class="fas fa-arrow-right"></i></a></div><div class="calendar-header"><div class="month-year">2025年5月</div></div><div class="week-days"><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div></div><div class="calendar-grid"><div class="calendar-day other-month">26</div><div class="calendar-day other-month">27</div><div class="calendar-day other-month">28</div><div class="calendar-day other-month">29</div><div class="calendar-day other-month">30</div><div class="calendar-day today holiday">31 <span style="font-size:0.7rem;display:block;">端午</span></div><div class="calendar-day">1 <span style="font-size:0.7rem;display:block;">儿童节</span></div></div></div><!-- Festival Card --><div class="card festival-card"><div class="card-header"><h2 class="card-title">节日习俗</h2></div><div class="festival-name">端午节</div><p>端午节是中国的传统节日，为每年农历五月初五。端午节有吃粽子，赛龙舟，挂菖蒲、蒿草、艾叶，薰苍术、白芷，喝雄黄酒的习俗。</p><div class="customs-list"><div class="custom-item"><i class="custom-icon fas fa-dumpling"></i>吃粽子</div><div class="custom-item"><i class="custom-icon fas fa-herbal"></i>佩戴香囊</div><div class="custom-item"><i class="custom-icon fas fa-wine-glass"></i>饮雄黄酒</div><div class="custom-item"><i class="custom-icon fas fa-ship"></i>赛龙舟</div><div class="custom-item"><i class="custom-icon fas fa-leaf"></i>悬艾叶</div><div class="custom-item"><i class="custom-icon fas fa-seedling"></i>悬菖蒲</div></div></div></div><footer><p>© 2025 金融信息与节日日历 | 数据更新时间: 2025年5月31日 11:50</p></footer></div><script>// 简单的日期更新功能document.addEventListener('DOMContentLoaded', function() {const today = new Date();const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };const dateString = today.toLocaleDateString('zh-CN', options);// 更新页面中的日期显示const dateElements = document.querySelectorAll('.date-display');dateElements.forEach(el => {el.innerHTML = `<i class="fas fa-calendar-alt"></i> ${dateString}`;});// 添加日历点击事件const calendarDays = document.querySelectorAll('.calendar-day');calendarDays.forEach(day => {day.addEventListener('click', function() {calendarDays.forEach(d => d.classList.remove('selected'));this.classList.add('selected');});});});</script>
</body>
</html>