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

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

news 2025/6/10 4:23:24

二：效果

三：页面分析/开发逻辑

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

C++ 变量和基本类型

1、变量的声明和定义 1.1、变量声明规定了变量的类型和名字。定义初次之外，还申请存储空间，也可能会为变量赋一个初始值。如果想声明一个变量而非定义它，就在变量名前添加关键字extern，而且不要显式地初始化变量： e…...

编程新知 2025/6/10 4:18:20

HarmonyOS-ArkUI 自定义弹窗

自定义弹窗自定义弹窗是界面开发中最为常用的一种弹窗写法。在自定义弹窗中， 布局样式完全由您决定，非常灵活。通常会被封装成工具类，以使得APP中所有弹窗具备相同的设计风格。自定义弹窗具备的能力有打开弹窗自定义布局，以…...

编程新知 2025/6/10 3:24:37

网络安全问题及对策研究

摘要网络安全问题一直是近年来社会乃至全世界十分关注的重要性问题，网络关乎着我们的生活，政治，经济等多个方面，致力解决网络安全问题以及给出行之有效的安全策略是网络安全领域的一大目标。本论文简述了课题的开发背景&…...

编程新知 2025/6/10 1:20:25

学习英语。

1. 先自己翻译一遍（葫芦背书法） 结构补充修饰最核心的记忆然后再修饰 2.意群之间翻译： 1.意群对于两个意群合起来翻译方法1就是着重某一 6.或者意群之间核心词一个介词于对于介词化修饰 3.句子之间关系主句1 after句子2 那么句…...

编程新知 2025/6/9 19:46:45

基于fpga的疲劳驾驶检测

基于fpga的疲劳驾驶检测前言一、系统硬件设计二、系统软件设计系统上板实验测试前言代码基于网络大佬代码进行修改的。限制性比较大，不太灵活，当个本科毕业设计还是够的。基于FPGA的疲劳检测模块硬件设计以FPGA核心控制模块为中心，通过…...

编程新知 2025/6/9 18:32:12

基于sqlite的任务锁（支持多进程/多线程）

前言介绍任务锁，在多进程服务间控制耗时任务的锁，确保相同id的耗时任务同时只有一个在执行依赖 SqliteOp，参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/137019125 实现方式 utils/taskLock.py import timefrom utils.SqliteOp import Sqli…...

编程新知 2025/6/9 15:50:44

深入解析Java21核心新特性（虚拟线程，分代 ZGC，记录模式模式匹配增强）

文章目录前言一、虚拟线程 (Virtual Threads - JEP 444) - 并发的革命1.1 解决的核心问题🎯1.2 工作原理与核心机制⚙️1.3 使用详解与最佳实践🛠️1.4 注意事项⚠️1.5 总结 📚 二、分代 ZGC (Generational ZGC - JEP 439) - 低延迟新高度2…...

编程新知 2025/6/9 15:20:49