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

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

news 2025/9/18 3:02:48

二：效果

三：页面分析/开发逻辑

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（改进版）

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

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

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

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

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

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

打开 HBuilderX，点击运行 -> 运行到浏览器 -> 设置web服务器 -> 添加chrome浏览器安装路径 chrome谷歌浏览器插件 B站视频下载助手插件： 参考地址：Chrome插件 - B站下载助手（轻松下载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是如何做内存管理的（有哪些内存区域）? （1）堆，使用malloc、free动态分配和释放空间，能分配较大的内存； （2）栈，为函数的局部变量分配内存，能分配…...

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

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

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

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

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

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

编程日记 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 日志存储 — 日志索引

每个日志分段文件对应两个索引文件：偏移量索引文件用来建立消息偏移量到物理地址之间的映射；时间戳索引文件根据指定的时间戳来查找对应的偏移量信息。 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 社区年度之星专访：北控水务纪晓东，社区铁杆开发者

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

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

Docker 实现MySQL 主从复制

一、拉取镜像 docker pull mysql:5.7相关命令： 查看镜像：docker images 二、启动镜像启动mysql01、02容器： 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

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

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

编程日记 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函数使用： start_task:用来创建其他的三个任务。 task1：实现LED1每500ms闪烁一次。 task2：实现LED2每500ms闪烁一次。 task3：判断按键按下逻辑，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，实现在线编辑…...

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

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

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

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

【CC2640R2F】香瓜CC2640R2F之SPI读写W25Q80

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

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现数据库设置 2个db_recovery参数创建guarantee闪回点，不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

云计算——弹性云计算器（ECS）

弹性云服务器：ECS 概述云计算重构了ICT系统，云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台，包含如下主要概念。 ECS（Elastic Cloud Server）：即弹性云服务器，是云计算…...

编程新知 2025/8/16 21:50:27

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...

编程新知 2025/6/11 15:25:30

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/7/8 4:43:23

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学（ECC）是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。椭圆曲线密码学是多种数字签名算法的基础，例如椭圆曲线数字签…...

编程新知 2025/9/12 1:12:23

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/9/16 6:14:35