pc端小卡片功能-原生JavaScript金融信息与节日日历
代码如下
<!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>
界面展示
相关文章：
pc端小卡片功能-原生JavaScript金融信息与节日日历
代码如下 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>金融信息与节日日历</title><…...
窗口聚合窗口聚合
taskmanager.memory.managed.fraction 在 Apache Flink 中，配置项 taskmanager.memory.managed.fraction 用于控制任务管理器（TaskManager）所占用的总内存中，分配给管理内存（Managed Memory）的比例。管理内…...
es在Linux安装
如果服务器能访问外网： wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.4.0.zip不能就手动下载，解压文件到合适目录 unzip elasticsearch-6.4.0.zip -d /opt/ mv /opt/elasticsearch-6.4.0 /opt/elasticsearch创建和日志…...
Go语言学习--＞第一个go程序--hello world!
Go语言学习–＞第一个go程序–hello world! 1 写代码前的准备 1 创建编写代码的文件夹 2 使用vscode打开3 项目初始化 **go mod init*（初始化一个go mod）Go Module 是 Go 1.11 版本引入的官方依赖管理系统，用于替代传统的 GOPATH…...
高雄市12岁以下身心障碍儿童口腔保健合作院所名单数据集
描述： 关键字：儿童、口腔、保健、院所、名单 字段特征：序号、院所分级、合作医疗院所、市话、地址 语言：繁体 行数/数量：129行，5列 数据量 ：7.27KB 格式：CSV、JSON、XML 目录…...
Spring Boot 自动参数校验
在 Spring Boot 中实现参数自动校验主要依靠 Java Bean Validation API（JSR 380）和 Spring 的集成支持。以下是详细实现步骤： 1. 添加依赖 在 pom.xml 中添加验证依赖： <dependency><groupId>org.springframework.b…...
破局新能源消纳难题！安科瑞智慧能源平台助力10KV配电网重构未来
一、政策驱动：新型配电网迎来 “智慧化” 刚需 随着分布式光伏、工商业储能、电动汽车充电桩等新型电力设施大规模并网，传统 10kV 配电网正面临 “高渗透、强波动、多交互” 的运行挑战。2025 年 6 月 1 日正式实施的《配电网通用技术导则》（…...
推荐10个AI视频生成工具网站
以下是10个AI视频生成工具网站推荐： 国内工具 可灵：由快手AI团队研发，支持文生视频、图生视频、首尾帧设置和运镜调整等功能，生成视频画质高，适合短视频创作、AI唱跳、动画短片等。官网：可灵 即梦&#…...
TIA博途中的程序导出为PDF格式的具体方法示例
TIA博途中的程序导出为PDF格式的具体方法示例 如下图所示，选中想要导出为PDF的程序块，右击选择“打印”， 如下图所示，选择“导出为WPS PDF” 或者“Microsoft Print to PDF”， 如下图所示，设置文档布局相关…...
【大模型:知识图谱】--4.neo4j数据库管理（cypher语法1）
使用neo4j的cypher语法对图数据库进行管理；官网地址：Create, start, and stop databases - Operations Manual 目录 1.neo4j--简介 1.1.Neo4j版本的标准数据库 1.2.默认数据库 1.3.每用户主数据库 1.4.system数据库 2.neo4j--数据库管理 2.1.命名…...
Java 实现下拉框树状结构接口的核心思路
目录 核心思路 1. 定义树节点数据结构 ： 2. 获取扁平化数据 ： 3. 构建树形结构 ： 4. 暴露接口 ： TreeService.java：树形构建服务 解释 ： 总结 下拉框（Dropdown）展示层级结构数…...
数字化时代养老机构运营实训室建设方案：养老机构运营沙盘实训模块设计
在数字化浪潮席卷各行各业的当下，养老机构运营实训室建设方案中的养老机构运营沙盘实训模块设计，已成为培养专业养老运营人才的关键环节，它需紧密贴合时代需求，构建兼具前瞻性与实用性的实训体系。点击获取实训室建设方案 一、养…...
自由开发者计划 004：创建一个苹果手机长截屏小程序
一. 背景 年初，一个漂亮姐姐突然问我，iphone这么多年一直没法长截屏，你们程序员就没个办法把这个硬伤补上吗？ 虎躯一震，脑瓜子嗡嗡的，这么多年的iphone资深用户，最初也不是没有想过这个问题&am…...
【Go语言基础】基本语法
文章目录 一、 程序基本结构二. 词法标记（Lexical Tokens）（编译器解析单元）三、 标识符规则（变量命名规则）四、注释与行分隔符五、关键字与预定义标识符六、 代码示例解析 以下是基于文档的Go语言基础语法总…...
工作流引擎-18-开源审批流项目之 plumdo-work 工作流，表单，报表结合的多模块系统
工作流引擎系列 工作流引擎-00-流程引擎概览 工作流引擎-01-Activiti 是领先的轻量级、以 Java 为中心的开源 BPMN 引擎，支持现实世界的流程自动化需求 工作流引擎-02-BPM OA ERP 区别和联系 工作流引擎-03-聊一聊流程引擎 工作流引擎-04-流程引擎 activiti 优…...
【虚拟机版本号】如果忘记了版本号，这样查找版本号
【虚拟机版本号】如果忘记了版本号，这样查找版本号 找到虚拟机的文件： 然后用记事本打开这个：.vmx文件 然后搜索.version...
std::conditional_t一个用法
例子摘自： 《mastering-the-c17-stl-make-full-use-of-the-standard-library-components-in-c17.pdf》 struct list_node {int data;list_node *next; };template<bool Const> struct list_of_ints_iterator {friend class list_of_ints;friend class list…...
Java高效批量读取Redis数据：原理、方案与实战案例
Java高效批量读取Redis数据：原理、方案与实战案例 在电商大促场景中，某平台需要实时展示用户购物车数据，面对每秒10万的请求，传统单次读取Redis的方式导致响应延迟高达500ms。通过批量读取优化，最终将延迟降至20ms以内…...
基于RK3568的多网多串电力能源1U机箱解决方案，支持B码，4G等
基于RK3568的多网多串电力能源1U机箱解决方案，结合B码对时和4G通信能力，可满足电力自动化、能源监控等场景的高可靠性需求。核心特性如下： 一、硬件配置 处理器平台 搭载RK3568四核Cortex-A55处理器，主频1.8GHz-2.0GHz&#…...
面试题：Java多线程并发
继承 Thread 类 Thread 类本质上是实现了 Runnable 接口的一个实例，代表一个线程的实例。启动线程的唯一方法就是通过 Thread 类的 start()实例方法。start()方法是一个 native 方法，它将启动一个新线程，并执行 run()方法。 public class M…...
2006-2020年各省用水总量数据
2006-2020年各省用水总量数据 1、时间：2006-2020年 2、来源：国家统计局、统计年鉴 3、指标：行政区划代码、地区名称、年份、用水总量 4、范围：31省 5、指标说明：用水总量是指一个国家或地区在一定时期内ÿ…...
舵机在弹簧刀无人机中的作用是什么？
随着俄乌冲突的越发激烈，美国国防部宣布向乌克兰提供“弹簧刀”600型无人机。对于美国接连不断向乌克兰输送武器的做法，俄罗斯方面已经多次指责美国是在“火上浇油”，从而使俄乌冲突持续下去。 那么，弹簧刀究竟是一款怎样的无人机…...
c++ openssl 使用 DES（数据加密标准）进行加密和解密的基本操作
使用 DES（数据加密标准）进行加密和解密的基本操作，重点展示了 ECB 和 CBC 模式，并且通过篡改密文的方式来进行攻击。下面是对每个部分的详细解析。 1. 结构体 Slip struct Slip {char from[16] { 0 }; // 交易的发起者&#x…...
Git忽略规则.gitignore不生效解决
我在gitlab中新建了一个项目仓库，先把项目文件目录绑定到仓库，并全部文件都上传到了仓库中。 然后又从别的项目复制了忽略文件配置过来，怎么搞他都不能生效忽略我不要提交仓库的文件。 从网上查到说在本地仓库目录中，打开命…...
Excel高级函数使用FILTER、UNIQUE、INDEX
IFERROR(INDEX(UNIQUE(FILTER(明细表副本!B:B,(明细表副本!I:I>$B$1)*(明细表副本!I:I<$B$2)*(明细表副本!C:C<>$B$3)*(明细表副本!V:V$B$4))),ROW(明细表副本!B2)),"")解读 一、FILTER 过滤 FILTER(过滤列，过滤条件过滤条件） 过滤…...
6月5日day45
Tensorboard使用介绍 知识点回顾： tensorboard的发展历史和原理tensorboard的常见操作tensorboard在cifar上的实战：MLP和CNN模型 效果展示如下，很适合拿去组会汇报撑页数： 作业：对resnet18在cifar10上采用微调策略下&a…...
Linux 系统 rsyslog 配置
Linux 系统 rsyslog 配置指南 rsyslog 是 Linux 系统的下一代日志处理系统，功能强大且高效。以下是从基础到高级的全面配置指南： 1. 安装与基础配置 安装 rsyslog # Ubuntu/Debian sudo apt update sudo apt install rsyslog# CentOS/RHEL sudo yum …...
基于rpc框架Dubbo实现的微服务转发实战
目录 rpc微服务模块 导入依赖 配置dubbo 注解 开启Dubbo Dubbo的使用 特殊点 并没有使用 Reference 注入 微服务之间调用 可以选用Http 也可以Dubbo 我们 Dubbo 的实现需要一个注册中心 我作为一个服务的提供者 我需要把我的服务注册到注册中心去 调用方需要注册中心…...
matlab基于GUI实现水果识别
基于GUI实现水果识别系统，限一个图片内存在一种水果 图像处理是一种利用计算机分析图像以达到预期结果的技术。图像处理一般指数字图像处理，而数字图像指由工业相机、摄像机、扫描仪等设备捕捉到的二维数组，数组中的元素称为像素，…...
视频爬虫的Python库
1. 请求与网络库 最基础的 HTTP 请求库，用于发送 GET/POST 请求获取网页内容。 示例：获取视频页面 HTML 或 API 响应。 import requests response requests.get(https://example.com/video/123) aiohttp 异步 HTTP 请求库，适合大规模并发下…...