Javascript implementiert Countdown- und Popup-Eingabeaufforderungseffekte_Javascript-Fähigkeiten

In der Front-End-Entwicklung ist die Verwendung des Countdowns unvermeidlich. Wenn Sie beispielsweise eine Double Eleven-Veranstaltung durchführen, müssen Sie einen halben Monat vor Beginn der Veranstaltung einige Werbemaßnahmen durchführen und die Benutzer darüber informieren, wann die Rabattveranstaltung beginnt. Zu diesem Zeitpunkt wird ein Countdown verwendet, um den Benutzer beispielsweise daran zu erinnern, wann die Aktivität auf einer bestimmten Seite der gesamten Website beginnt. In den späteren Phasen der Veranstaltung, insbesondere wenn nur noch etwa 1 Tag bis zum Ende der Veranstaltung verbleibt, wird ein Pop-up-Countdown verwendet. Dieser Countdown wird oben auf der Startseite der gesamten Website eingestellt (natürlich kann er auch an anderen Stellen eingestellt werden, z. B. in der Mitte der Startseite usw.) und das Popup-Fenster wird so eingestellt, dass es danach automatisch verschwindet 10 Sekunden Es bleibt dem Benutzer überlassen, ob er auf die entsprechende Aktivitätsseite klickt und das Produkt kauft.

Technischer Support erforderlich: CSS3, jQuery-Bibliothek;

Der HTML-Code lautet wie folgt:

<section class="the_body">
  <div class="countdown">
    <h3>距中国雄于地球之日还有</h3>
    <div class="countdown_time">
     <span class="the_days"><i>0</i><i>3</i></span>
     <i class="date_text">天</i>
     <span class="the_hours"><i>0</i><i>7</i></span>
     <i class="date_text">时</i>
     <span class="the_minutes"><i>4</i><i>7</i></span>
     <i class="date_text">分</i>
     <span class="the_seconds"><i>1</i><i>1</i></span>
     <i class="date_text">秒</i>
    </div>
  </div>
</section>

Der CSS-Code lautet wie folgt:

.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}

Der JavaScript-Code lautet wie folgt:

<script>
function remaintime() {
 var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
 var nowdate = new Date();//获取当前日期
 var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
 var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
 var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
 var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
 var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
    1000 * 60) / (1000));//计算求得剩余秒数
 //当剩余天数小于10时，就在其前加一个0，以下剩余小时数、分钟数与秒数与此相同
 if (remainday < 10) {
  remainday = "0" + remainday;
 }else{remainday+="";
 //当剩余天数大于10时，剩余天数为数值，这是需要将该值转换为字符串，以下的剩余小时数、分钟数与秒数与此相同
}
 if (remainhour < 10) {
  remainhour = "0" + remainhour;
 }else{remainhour+="";}
 if (remainminute < 10) {
  remainminute = "0" + remainminute;
 }else{remainminute+="";}
 if (remainsecond < 10) {
  remainsecond = "0" + remainsecond;
 }else{remainsecond+="";}
 $(".the_days i:first-child").html(remainday.substr(0, 1));
 $(".the_days i:last-child").html(remainday.substr(1, 2));
 $(".the_hours i:first-child").html(remainhour.substr(0, 1));
 $(".the_hours i:last-child").html(remainhour.substr(1, 2));
 $(".the_minutes i:first-child").html(remainminute.substr(0, 1));
 $(".the_minutes i:last-child").html(remainminute.substr(1, 2));
 $(".the_seconds i:first-child").html(remainsecond.substr(0, 1));
 $(".the_seconds i:last-child").html(remainsecond.substr(1, 2));
 setTimeout("remaintime()",1000);//设置1秒后调用remaintime函数
}
remaintime();
setTimeout(function(){$(".countdown").hide();},10000);//在首页设置的弹窗效果，在分页这段代码可以不设置
</script>

Das ist der Countdown-Effekt, den ich selbst geschrieben habe. Natürlich kann jeder den Countdown-Effekt nach seinen eigenen Vorlieben einstellen. Sie können beispielsweise nur „Tage, Stunden, Minuten und Minuten“ anzeigen, aber ich persönlich bin der Meinung, dass die Einstellung „Tage, Stunden, Minuten und Sekunden“ nicht ausreicht, um Atmosphäre zu schaffen. Die Stile können hier auch nach Ihren eigenen Vorlieben geändert werden, aber der Endeffekt besteht darin, vor der Veranstaltung eine feurige Atmosphäre zu schaffen.

Was den HTML-Code, CSS-Code und JavaScript-Code hier betrifft, beachten Sie bitte:

Ich werde nicht näher auf den 1.html-Code eingehen. Die Hauptsache ist, wie man den Dom einrichtet, um den JavaScript-Betrieb zu erleichtern

2.css-Code verwendet hier hauptsächlich die Pseudoklassen :before und :after, um den dreidimensionalen Effekt des Countdown-Werts festzulegen;

3. Der JavaScript-Code ist auch eine sehr einfache Funktion. Hier müssen Sie die verbleibende Zeit in einen String umwandeln, um das Abfangen und Anzeigen des Strings zu erleichtern. Verwenden Sie außerdem die Funktion setTimeout, um die Funktion alle 1 Sekunde auszuführen, um die verbleibende Zeit dynamisch anzuzeigen. Natürlich können Sie auch die Funktion setInterval verwenden. Die Auswirkungen dieser beiden Funktionseinstellungen sind grundsätzlich gleich.

An dieser Stelle entsteht ein einfacher Countdown-Effekt. Wenn Sie einen Countdown für das Popup-Fenster auf der Startseite festlegen möchten, können Sie den Hintergrund kühler einstellen, um Benutzer zum Klicken anzuregen, und das Popup-Fenster so einstellen, dass es nach 10 Sekunden automatisch verschwindet (oder eine Schaltfläche zum Schließen usw. festlegen). .).

Es gibt viele Möglichkeiten, den Countdown umzusetzen. Ich werde diese hier zuerst vorstellen und sie weiter zusammenfassen, wenn ich Zeit habe.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird jedem beim Verständnis von Javascript helfen.