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

HTML之拜年/跨年APP（改进版）

news 2026/2/7 11:23:15

目录：

一：目录

二：效果

三：页面分析/开发逻辑

1.页面详细分析：

2.开发逻辑：

四：完整代码（不多废话）

index.html部分

app.json部分

二：效果

 三：页面分析/开发逻辑

1.页面详细分析：

（1） 页面标题为“拜年跨年倒计时”，表明该页面的主要功能是提供两个倒计时：一个用于拜年，另一个用于跨年。

（2） 页面显示了两个倒计时的时间：距离2025年拜年还有8天14时13分23秒，距离2026年跨年还有345天14时13分23秒。

（3）页面底部显示了版权信息，表明该页面是由宁夏线上海原编程培训中心/研发/开发工作室开发的。

2.开发逻辑：

1. 首先，需要获取当前的日期和时间。

2. 然后，计算距离2025年拜年和2026年跨年的剩余时间。

3. 将剩余时间以天、小时、分钟和秒的形式显示在页面上。

4. 最后，更新版权信息，显示开发者的名称和联系方式。

四：完整代码（不多废话）

index.html部分

<!doctype html>
<html><head><meta charset="UTF-8"><meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><title>拜年跨年倒计时</title><link rel="icon" href="images/favicon.jpg" type="image/x-icon"><style>#body {position: fixed;background-image: linear-gradient(to bottom right, #FFEB3B, #F44336, #FFEB3B);height: 100%;width: 100%;left: 0;top: 0;overflow: scroll;}.container {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: scroll;z-index: 2024;}.title {margin-top: 10%;text-align: center;font-size: 32px;color: white;text-shadow: 0 0 16px black;animation-name: title;animation-duration: 0.5s;animation-fill-mode: forwards;animation-delay: 0.1s;transform: translateX(64px);opacity: 0;}@keyframes title {from {transform: translateY(64px);opacity: 0;}to {transform: translateY(0);opacity: 1;}}.ydcard,.cjcard {width: 80%;height: 30%;background-color: #FBE9E7;background-clip: padding-box;border-radius: 8px;border: 16px solid rgba(255, 255, 255, 0.5);animation-name: card;animation-duration: 0.5s;animation-fill-mode: forwards;opacity: 0;margin-top: 64px;margin-bottom: 64px;max-width: 600px;max-height: 225px;transform: scale(0.85);}@keyframes card {from {opacity: 0;margin-top: 64px;margin-bottom: 64px;transform: scale(0.85);}to {opacity: 1;margin-top: 16px;margin-bottom: 16px;transform: scale(1);}}.jl1,.jl2 {font-size: 16px;margin-top: 8px;margin-left: 8px;opacity: 0;animation-name: opacity;animation-duration: 0.5s;animation-fill-mode: forwards;}.jlyd,.jlcj {font-size: 24px;font-weight: bolder;text-align: center;opacity: 0;animation-name: opacity;animation-duration: 0.5s;animation-fill-mode: forwards;color: transparent;-webkit-background-clip: text;text-shadow: 0 12px 16px #F44336;}@keyframes opacity {from {opacity: 0;}to {opacity: 1;}}.jl1 {animation-delay: 0.4s;}.jl2 {animation-delay: 0.6s;}.sign {margin: 16px;font-size: 16px;color: white;text-shadow: 0 0 8px black;animation-name: opacity;animation-duration: 0.5s;animation-fill-mode: forwards;animation-delay: 0.8s;opacity: 0;text-align: center;}.firework {width: 8px;height: 8px;border-radius: 8px;background: #000;position: fixed;bottom: 0;animation-name: blossom;animation-delay: .6s;animation-duration: .5s;animation-fill-mode: forwards;transition-property: margin-bottom, transform, filter;transition-duration: 1s, .5s, .5s;}@keyframes blossom {0% {}50% {opacity: 1;transform: scale(1);}75% {opacity: .7;}100% {opacity: 0;transform: scale(50);}}</style>
</head><body><div id="body"><div class="container"><div class="title">拜年倒计时</div><div class="ydcard" id="ydcard"><div class="jl1">距离 2025 年拜年：</div><div id="jlyd" class="jlyd"></div></div><div class="cjcard" id="cjcard"><div class="jl2">距离 2026 年跨年：</div><div id="jlcj" class="jlyd"></div></div><div class="sign">版权©️宁夏线上海原编程培训中心/研发/开发工作室.</div></div></div><script>//卡片定位var ydcard = document.getElementById('ydcard');var cjcard = document.getElementById('cjcard');function kpdw() {ydcard.style = "margin-left: calc(50% - " + (ydcard.clientWidth / 2 + 16) + "px);animation-delay: 0.2s;";cjcard.style = "margin-left: calc(50% - " + (cjcard.clientWidth / 2 + 16) + "px);animation-delay: 0.3s;";jlyd.style = "margin-top: calc(" + (ydcard.clientHeight / 2 - 52) + "px);animation-delay: 0.5s;background-image: linear-gradient(to right, #FFC107, #FF6F00);";jlcj.style = "margin-top: calc(" + (cjcard.clientHeight / 2 - 52) + "px);animation-delay: 0.7s;background-image: linear-gradient(to right, #FF5722, #BF360C);";}window.setInterval('kpdw();', 10); //每隔10毫秒定位一次卡片<!-- 杜洛码农部 --><!--  杜洛码农部-->function freshTime() {var ydTime = new Date("2025/1/29,00:00:00"); //拜年时间var cjTime = new Date("2026/1/1,00:00:00"); //跨年节时间var nowTime = new Date(); //当前时间var ydLeftTime = parseInt((ydTime.getTime() - nowTime.getTime()) / 1000); //距离拜年的时间var cjLeftTime = parseInt((cjTime.getTime() - nowTime.getTime()) / 1000); //距离跨年的时间ydD = parseInt(ydLeftTime / (24 * 60 * 60));cjD = parseInt(cjLeftTime / (24 * 60 * 60));ydH = parseInt(ydLeftTime / (60 * 60) % 24);cjH = parseInt(cjLeftTime / (60 * 60) % 24);ydM = parseInt(ydLeftTime / 60 % 60);cjM = parseInt(cjLeftTime / 60 % 60);ydS = parseInt(ydLeftTime % 60);cjS = parseInt(cjLeftTime % 60);document.getElementById("jlyd").innerHTML = ydD + " 天 " + ydH + " 时 " + ydM + " 分 " + ydS + " 秒"; //输出距离拜年的时间document.getElementById("jlcj").innerHTML = cjD + " 天 " + cjH + " 时 " + cjM + " 分 " + cjS + " 秒"; //输出距离跨年的时间//当拜年到达时if (ydLeftTime <= 0) {document.getElementById("jlyd").innerHTML = "拜年已至！";}//当跨年到达时if (cjLeftTime <= 0) {document.getElementById("jlcj").innerHTML = "跨年已至！";}}freshTime()var sh;sh = setInterval(freshTime, 10); //每隔10毫秒刷新一次时间//函数：随机颜色function randomColor() {r = Math.random() * 255;g = Math.random() * 255;b = Math.random() * 255;return "rgb(" + r + ", " + g + ", " + b + ")";}//延时执行：播放烟花效果window.setTimeout(function() {window.setInterval(function() {var firework = document.createElement("div");firework.style.left = Math.random() * screen.width + "px";firework.style.backgroundColor = randomColor();brightness = (Math.random() * 1 + 1);firework.style.filter = "brightness(" + brightness + ")";document.getElementById("body").appendChild(firework);firework.classList.add("firework");firework.style.transform = "scale(1,4) translateY(24px)";window.setTimeout(function() {firework.style.marginBottom = Math.random() * screen.height + "px";}, 99);<!--杜洛码农部  -->window.setTimeout(function() {document.body.removeChild(firework);}, 1500);}, Math.random() * 200 + 300);}, 2000);</script>
</body></html>

app.json部分

{"appName": "拜年跨年倒计时APP","appIconPath": "favicon.png","splashPath": "favicon.png","packageName" : "com.mycomapny.mywebapp","versionName" : "1.0.0","versionCode" : 1,"isFullscreen" : false,"isHideTitleBar" : false,"titleBarBackgroundColor" : "#3F51B5","isAllowLongClick" : true,"isShowLoadingUI" : true,"isAllowZoom" : true,"isPCMode" : false,"isAllowAutoplay" : false,"homePage" : "index.html","withPHPEnv": false,"PHPPort": 57249,"isAllowSwipeRefresh": true,"screenRotationMethod": 0,"isAllowCamera": false,"isAllowMicrophone": false
}

相关文章：

HTML之拜年/跨年APP（改进版）

目录&#xff1a; 一&#xff1a;目录 二&#xff1a;效果 三&#xff1a;页面分析/开发逻辑 1.页面详细分析&#xff1a; 2.开发逻辑&#xff1a; 四&#xff1a;完整代码&#xff08;不多废话&#xff09; index.html部分 app.json部分 二&#xff1a;效果 三&#xff1a;页面…...

编程日记 2025/1/21 19:56:37

嵌入式硬件篇---ADC模拟-数字转换

文章目录 前言第一部分&#xff1a;STM32 ADC的主要特点1.分辨率2.多通道3.转换模式4.转换速度5.触发源6.数据对齐7.温度传感器和Vrefint通道 第二部分&#xff1a;STM32 ADC的工作流程&#xff1a;1.配置ADC2.启动ADC转换 第三部分&#xff1a;ADC转化1.抽样2.量化3.编码 第四…...

编程日记 2025/1/21 19:53:33

每打开一个chrome页面都会【自动打开F12开发者模式】，原因是 使用HBuilderX会影响谷歌浏览器的浏览模式

打开 HBuilderX&#xff0c;点击 运行 -> 运行到浏览器 -> 设置web服务器 -> 添加chrome浏览器安装路径 chrome谷歌浏览器插件 B站视频下载助手插件&#xff1a; 参考地址&#xff1a;Chrome插件 - B站下载助手&#xff08;轻松下载bilibili哔哩哔哩视频&#xff09…...

编程日记 2025/1/21 19:52:32

Access数据库教案（Excel+VBA+Access数据库SQL Server编程）

文章目录： 一：Access基础知识 1.前言 1.1 基本流程 1.2 基本概念?? 2.使用步骤方法 2.1 表【设计】 2.1.1 表的理论基础 2.1.2 Access建库建表? 2.1.3 表的基本操作 2.2 SQL语句代码【设计】 2.3 窗体【交互】? 2.3.1 多方式创建窗体 2.3.2 窗体常用的控件 …...

编程日记 2025/1/21 19:51:29

09、PT工具用法

目录 1、PT工具原理 2、在线修改表结构 3、使用pt-query-diges分析慢查询 4、使用pt-kill来kill掉一些垃圾SQL 5、pt-table-checksum进行主从一致性排查和修复 6、pt-archiver进行数据归档 7、其他一些pt工具 1、PT工具原理 创建一张与原始表结构相同的临时表 然后对临时…...

编程日记 2025/1/21 19:50:28

华为OD机试E卷 --矩形相交的面积--24年OD统一考试（Java JS Python C C++）

文章目录 题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码题目描述 给出3组点坐标(x， y, w, h)，-1000<x,y<1000,w,h为正整数。 (x,y, w, h)表示平面直角坐标系中的一个矩形:x, y为矩形左上角坐标点，w, h向右w，向下h。(X, y, w, h)表示x轴…...

编程日记 2025/1/21 19:48:25

C++ 内存分配和管理（八股总结）

C是如何做内存管理的&#xff08;有哪些内存区域&#xff09;? &#xff08;1&#xff09;堆&#xff0c;使用malloc、free动态分配和释放空间&#xff0c;能分配较大的内存&#xff1b; &#xff08;2&#xff09;栈&#xff0c;为函数的局部变量分配内存&#xff0c;能分配…...

编程日记 2025/1/21 19:47:24

如何使用 JSONP 实现跨域请求？

以下是使用 JSONP 实现跨域请求的步骤&#xff1a; 实现步骤&#xff1a; 1. 客户端设置 在客户端&#xff0c;你需要创建一个 <script> 标签&#xff0c;并将其 src 属性设置为跨域请求的 URL&#xff0c;并添加一个 callback 参数。这个 callback 参数将包含一个函数…...

编程日记 2025/1/21 19:45:20

【机器学习实战入门】基于深度学习的乳腺癌分类

什么是深度学习&#xff1f; 作为对机器学习的一种深入方法&#xff0c;深度学习受到了人类大脑和其生物神经网络的启发。它包括深层神经网络、递归神经网络、卷积神经网络和深度信念网络等架构&#xff0c;这些架构由多层组成&#xff0c;数据必须通过这些层才能最终产生输出。…...

编程日记 2025/1/21 19:44:19

Flowable 管理各业务流程：流程设计器 (获取流程模型 XML)、流程部署、启动流程、流程审批、流程挂起和激活、任务分配

文章目录 引言I 表结构主要表前缀及其用途核心表II 流程设计器（Flowable BPMN模型编辑器插件）Flowable-UIvue插件III 流程部署部署步骤例子：根据流程模型ID部署IV 启动流程启动步骤ACT_RE_PROCDEF：流程定义相关信息例子：根据流程 ID 启动流程V 流程审批审批步骤Flowable 审…...

编程日记 2025/1/21 19:42:17

Kafka 日志存储 — 日志索引

每个日志分段文件对应两个索引文件&#xff1a;偏移量索引文件用来建立消息偏移量到物理地址之间的映射&#xff1b;时间戳索引文件根据指定的时间戳来查找对应的偏移量信息。 1 日志索引 Kafka的索引文件以稀疏索引的方式构造消息的索引。它并不保证每个消息在索引文件中都有…...

编程日记 2025/1/21 19:41:16

【大模型】ChatGPT 高效处理图片技巧使用详解

目录 一、前言 二、ChatGPT 4 图片处理介绍 2.1 ChatGPT 4 图片处理概述 2.1.1 图像识别与分类 2.1.2 图像搜索 2.1.3 图像生成 2.1.4 多模态理解 2.1.5 细粒度图像识别 2.1.6 生成式图像任务处理 2.1.7 图像与文本互动 2.2 ChatGPT 4 图片处理应用场景 三、文生图操…...

编程日记 2025/1/21 19:40:14

OceanBase 社区年度之星专访：北控水务纪晓东，社区铁杆开发者

编者按&#xff1a;作为开源数据库&#xff0c;社区的发展和持续进步&#xff0c;来自于每一位贡献者的智慧与支持。2024年度&#xff0c;OceanBase社区特别设立了“年度之星”奖&#xff0c;以表彰和感谢在过去一年中&#xff0c;为社区发展作出突出贡献的朋友。 今日&#x…...

编程日记 2025/1/21 19:35:07

Docker 实现MySQL 主从复制

一、拉取镜像 docker pull mysql:5.7相关命令&#xff1a; 查看镜像&#xff1a;docker images 二、启动镜像 启动mysql01、02容器&#xff1a; docker run -d -p 3310:3306 -v /root/mysql/node-1/config:/etc/mysql/ -v /root/mysql/node-1/data:/var/lib/mysql -e MYS…...

编程日记 2025/1/21 19:34:05

农业农村大数据应用场景｜珈和科技“数字乡村一张图”解决方案

近年来&#xff0c;珈和科技持续深耕农业领域&#xff0c;聚焦时空数据服务智慧农业。 珈和利用遥感大数据、云计算、移动互联网、物联网、人工智能等先进技术&#xff0c;搭建“天空地一体化”监测体系&#xff0c;并创新建设了150的全球领先算法模型&#xff0c;广泛应用于高…...

编程日记 2025/1/21 19:30:01

doris 2.1 Queries Acceleration-Hints 学习笔记

1 Hint Classification 1.1 Leading Hint：Specifies the join order according to the order provided in the leading hint. 1.2 Ordered Hint：A specific type of leading hint that specifies the join order as the original text sequence. 1.3 Distribute Hint：Speci…...

编程日记 2025/1/21 19:20:49

STM32 FreeRTOS 任务挂起和恢复---实验

实验目标 学会vTaskSuspend( )、vTaskResume( ) 任务挂起与恢复相关API函数使用&#xff1a; start_task:用来创建其他的三个任务。 task1&#xff1a;实现LED1每500ms闪烁一次。 task2&#xff1a;实现LED2每500ms闪烁一次。 task3&#xff1a;判断按键按下逻辑&#xff0c;KE…...

编程日记 2025/1/21 19:07:34

Ubuntu 24.04 LTS 通过 docker desktop 安装 seafile 搭建个人网盘

准备 Ubuntu 24.04 LTSUbuntu 空闲硬盘挂载Ubuntu 安装 Docker Desktop [我的Ubuntu服务器折腾集](https://blog.csdn.net/jh1513/article/details/145222679。 安装 seafile 参考资料 Docker安装 Seafile OnlyOffice 并配置OnlyOffice到Seafile&#xff0c;实现在线编辑…...

编程日记 2025/1/21 19:06:32

Open3D 最小二乘拟合平面（直接求解法）【2025最新版】

目录 一、算法原理二、代码实现三、结果展示本文由CSDN点云侠原创，原文链接。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫与GPT。 博客长期更新，本文最近更新时间为：2025年1月18日。 一、算法原理 平面方程的一般表达式为：...

编程日记 2025/1/21 19:05:30

【CC2640R2F】香瓜CC2640R2F之SPI读写W25Q80

本文最后修改时间&#xff1a;2022年01月08日 10:45 一、本节简介 本节以simple_peripheral工程为例&#xff0c;介绍如何使用SPI读写W25Q80&#xff08;外部flash&#xff09;。 二、实验平台 1&#xff09;CC2640R2F平台 ①协议栈版本&#xff1a;CC2640R2 SDK v1.40.00.4…...

编程日记 2025/1/21 19:04:30

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/1/21 18:14:22

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2026/1/16 16:34:26

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/9/24 12:50:07

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35