2023春节倒计时新款HTML单页源码_最优秀的QQ技术网_最专业的网络资源收集平台_小辉资源网分享_小刀娱乐网

2023春节倒计时新款HTML单页源码

2022-12-11 727 0

2023春节倒计时新款HTML单页自适应页面，有兴趣的可以看看！背景图片自己修改喜欢的！

代码如下：

<!DOCTYPE html>
<html lang="en" >

<head>

    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-title" content="moyublog">
    <title>春节倒计时</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
        }
        body{
            background: url(http://www.61ling.com/tapi/acgurl.php) no-repeat center center fixed;
            background-attachment: fixed;
            background-blend-mode: hard-light;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        .container{
            position: absolute;
            top: 80px;
            left: 100px;
            right: 100px;
            bottom: 80px;
            background: url(img/wenjun-lin-20210203114915.jpg);
            background-attachment: fixed;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-shadow: 0 1px 1px rgba(0,0,0,0.12),
            0 2px 2px rgba(0,0,0,0.12),
            0 4px 4px rgba(0,0,0,0.12),
            0 8px 8px rgba(0,0,0,0.12),
            0 16px 16px rgba(0,0,0,0.12);
        }
        .container h2{
            text-align: center;
            font-size: 10em;
            line-height: 0.7em;
            color: #fff;
            margin-top: -80px;
        }
        .container h2 span{
            display: block;
            letter-spacing: 6px;
            font-size: 0.2em;
        }
        .countdown{
            display: flex;
            margin-top: 50px;
        }
        .countdown div{
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: #ff2b2b9e;
            color: #fff;
            margin: 0 15px;
            font-size: 3em;
            box-shadow: 0 1px 1px rgba(0,0,0,0.12),
            0 2px 2px rgba(0,0,0,0.12),
            0 4px 4px rgba(0,0,0,0.12),
            0 8px 8px rgba(0,0,0,0.12),
            0 16px 16px rgba(0,0,0,0.12);
        }
        .countdown div:before{
            content: """";
            position: absolute;
            bottom: -30px;
            left: 0;
            width: 100%;
            height: 50px;
            background: #d5ce03;
            color: black;
            font-size: 0.35em;
            line-height: 35px;
        }
        .countdown #day:before{
            content: '天';
        }
        .countdown #hour:before{
            content: '小时';
        }
        .countdown #minute:before{
            content: '分';
        }
        .countdown #second:before{
            content: '秒';
        }
    </style>




    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no" >
<div class="container">
    <h2><span>距</span> 2023年春节 <span>还剩</span></h2>
    <div class="countdown">
        <div id="day"></div>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>
</div>
<script>
    const newYear = '1 Feb 2023';
    var newYearsDate = new Date(newYear);

    function year() {
        var currentDate = new Date();

        var totalseconds = (newYearsDate - currentDate) / 1000;

        var d = Math.floor(totalseconds / 3600 / 24);
        var h = Math.floor(totalseconds / 3600 % 24);
        var m = Math.floor(totalseconds / 60 ) % 60;
        var s = Math.floor(totalseconds) % 60;

        document.getElementById("day").innerText = d;
        document.getElementById("hour").innerText = h;
        document.getElementById("minute").innerText = m;
        document.getElementById("second").innerText = s;
    }

    setInterval(function () {
        year();
    }, 1000);//www.61ling.com
</script>

</body>

</html>

Plugins by frpkj.com

下载地址：

文件名称：2023春节倒计时新款HTML单页源码

文件大小：45KB适用版本：PC

更新日期：2022-12-11作者信息：小辉网络

点击下载 查看演示

上一篇: 秘密胶囊开源版-最新匿名留言程序源码

下一篇: 淘宝搜索多个类目第一实战课程