How to create a beautiful countdown effect with the front-end Three Musketeers-Front-end Q&A-php.cn

How to create a beautiful countdown effect with the front-end Three Musketeers

藏色散人

Release： 2021-08-19 14:15:36

Original

2262 people have browsed it

In the previous article "Use CSS to quickly create an advanced blurry background image", I introduced you how to use CSS to quickly create an advanced blurry background image. The effect is very cool. Interested friends can learn about it~

The focus of this article is to introduce to you how to achieve a very beautiful and practical countdown effect through the front-end three swordsmen (HTML, css, javascript).

If you need a countdown page, don’t miss this article~

Let’s go directly to the complete code:

The code to achieve the countdown effect is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
<style>
    body, html {
        height: 100%;
        margin: 0;
    }
    .bgimg {
        background-image: url(&#39;003.jpg&#39;);
        height: 100%;
        width:100%;
        background-position: center;
        background-size: cover;
        position: relative;
        color: white;
        font-family: "Courier New", Courier, monospace;
        font-size: 25px;
    }
    .topleft {
        background-image: url(&#39;logo.png&#39;);
        position: absolute;
        width:100%;
        height:100%;
        background-repeat: no-repeat;
        top: 2px;
        left: 16px;


    }
    .bottomleft {
        position: absolute;
        bottom: 0;
        left: 16px;
    }
    .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    hr {
        margin: auto;
        width: 40%;
    }
</style>

</head>
<body>
<div class="bgimg">
    <div class="topleft">
        <div id="color-overlay"></div>
    </div>
    <div class="middle">
        <h1>距离2022年春节还有：</h1>
        <hr>
        <p id="demo" style="font-size:30px"></p>
    </div>
    <div class="bottomleft">
        <p>www.php.cn</p>
    </div>
</div>
<script>
    // 设定我们倒计时的日期
    var countDownDate = new Date("2022,2,1").getTime();
    // 每1秒更新一次计数
    var countdownfunction = setInterval(function() {
        // 获取今天的日期和时间
        var now = new Date().getTime();

        // 找出现在与倒数日期之间的差
        var distance = countDownDate - now;

        // 时间计算为天，小时，分和秒
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // 在id="demo"的元素中输出结果
        document.getElementById("demo").innerHTML = days + "天" + hours + "时"
            + minutes + "分" + seconds + "秒";

        // 如果倒计时结束了，写一些文字
        if (distance < 0) {
            clearInterval(countdownfunction);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);
</script>
</body>
</html>

Copy after login

Run this file, the effect is as follows:

How to create a beautiful countdown effect with the front-end Three Musketeers

(The background image comes from the Internet, sorry for the infringement)

I want to To achieve the countdown effect, this function is mainly implemented through javascript. The style is of course set through html/css. For the specific code explanation, I have noted the meaning of each step through comments in the above code. I believe everyone can understand it at a glance~

You can also directly copy the above code and test it locally. The background image or text content can be easily replaced. If you want to achieve a different countdown effect, then you can expand it based on the content of this article! Learning and mastering implementation ideas is the most important thing!

Finally, if you have any questions, please leave a comment!

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css video tutorial" and "javascript basic tutorial"!

The above is the detailed content of How to create a beautiful countdown effect with the front-end Three Musketeers. For more information, please follow other related articles on the PHP Chinese website!