Maison >interface Web >Questions et réponses frontales >Comment créer un bel effet de compte à rebours avec le front-end des Trois Mousquetaires

Comment créer un bel effet de compte à rebours avec le front-end des Trois Mousquetaires

藏色散人original: 2021-08-19 14:14:392303parcourir

Dans l'article précédent "Utilisez CSS pour créer rapidement une image d'arrière-plan flou avancée", je vous ai présenté comment utiliser CSS pour créer rapidement une image d'arrière-plan flou avancée. L'effet est très cool. Les amis intéressés peuvent aller apprendre et comprendre~.

Ensuite, l'objectif de cet article est de vous présenter comment obtenir un effet de compte à rebours très beau et pratique grâce aux trois épéistes frontaux (HTML, css, javascript).

Si vous avez besoin d'une page de compte à rebours, ne manquez pas cet article~

Passons directement au code complet :

Le code pour obtenir l'effet compte à rebours est le suivant :

<!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>

Exécutez le fichier, l'effet est la suivante :

Comment créer un bel effet de compte à rebours avec le front-end des Trois Mousquetaires

(L'image de fond provient d'Internet, désolé pour l'infraction)

Pour obtenir l'effet compte à rebours, cette fonction est principalement implémentée via javascript. Le style est bien sûr défini via html/css. J'ai déjà passé l'explication spécifique du code dans le code ci-dessus. La méthode d'annotation indique la signification de chaque étape, je pense que tout le monde peut la comprendre en un coup d'œil~

Vous pouvez également copier directement le code ci-dessus pour tester localement. ou le contenu du texte peut être facilement remplacé. Si vous souhaitez obtenir un effet de compte à rebours différent, vous pouvez alors développer en fonction du contenu de cet article ! Apprendre et maîtriser les idées de mise en œuvre est la chose la plus importante !

Enfin, si vous avez des questions, n'hésitez pas à laisser un commentaire !

La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Invitez tout le monde à apprendre le "tutoriel vidéo CSS" et le "tutoriel de base Javascript" !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment comparer deux dates en utilisant JavaScriptArticle suivant：Comment comparer deux dates en utilisant JavaScript

Articles Liés

Voir plus