Heim >Web-Frontend >Front-End-Fragen und Antworten >So erzeugen Sie mit dem Frontend „Three Musketeers' einen wunderschönen Countdown-Effekt

So erzeugen Sie mit dem Frontend „Three Musketeers' einen wunderschönen Countdown-Effekt

藏色散人Original: 2021-08-19 14:14:392273Durchsuche

Im vorherigen Artikel „Verwenden Sie CSS, um schnell ein erweitertes, unscharfes Hintergrundbild zu erstellen“ habe ich Ihnen vorgestellt, wie Sie mit CSS schnell ein erweitertes, unscharfes Hintergrundbild erstellen können. Interessierte Freunde können gehen

Dann liegt der Schwerpunkt dieses Artikels darauf, Ihnen vorzustellen, wie Sie mit den drei Schwertkämpfern im Front-End (HTML, CSS, Javascript) einen sehr schönen und praktischen Countdown-Effekt erzielen können.

Wenn Sie eine Countdown-Seite benötigen, verpassen Sie diesen Artikel nicht ~

Lassen Sie uns direkt zum vollständigen Code gehen:

Der Code zum Erreichen des Countdown-Effekts lautet wie folgt:

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

Führen Sie die Datei aus, um den Effekt zu erzielen lautet wie folgt:

So erzeugen Sie mit dem Frontend „Three Musketeers einen wunderschönen Countdown-Effekt

(Das Hintergrundbild stammt aus dem Internet, Entschuldigung für den Verstoß)

Um den Countdown-Effekt zu erzielen, wird diese Funktion hauptsächlich über Javascript implementiert. Der Stil wird natürlich über HTML/CSS festgelegt. Ich habe die spezifische Codeerklärung im obigen Code bereits übergeben. Ich glaube, jeder kann sie auf einen Blick verstehen ~

Sie können den obigen Code auch direkt kopieren, um ihn lokal zu testen oder Textinhalte können leicht ersetzt werden. Wenn Sie einen anderen Countdown-Effekt erzielen möchten, können Sie ihn basierend auf dem Inhalt dieses Artikels erweitern! Das Erlernen und Beherrschen von Umsetzungsideen ist das Wichtigste!

Wenn Sie noch Fragen haben, hinterlassen Sie bitte einen Kommentar!

Die chinesische Website-Plattform verfügt über viele Video-Lehrressourcen. Willkommen zum Lernen von „CSS-Video-Tutorial“ und „Javascript-Grundlagen-Tutorial“!

Das obige ist der detaillierte Inhalt vonSo erzeugen Sie mit dem Frontend „Three Musketeers' einen wunderschönen Countdown-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So vergleichen Sie zwei Daten mit JavaScriptNächster Artikel：So vergleichen Sie zwei Daten mit JavaScript

In Verbindung stehende Artikel

Mehr sehen