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

news2025/1/21 6:07:00

二：效果

三：页面分析/开发逻辑

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
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2279671.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！