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

二：效果

三：页面分析/开发逻辑

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
}