Javascript implémente le compte à rebours et les compétences d'effets d'invite contextuelle_javascript

Dans le développement front-end, il est inévitable d'utiliser un compte à rebours. Par exemple, si vous organisez un événement Double Eleven, vous devez effectuer un travail de publicité un demi-mois avant le début de l'événement et vous devez informer les utilisateurs du début de l'événement à prix réduit. A ce moment, un compte à rebours est utilisé, par exemple pour rappeler à l'utilisateur quand l'activité commencera sur une certaine page de l'ensemble du site. Dans les étapes ultérieures de l'événement, en particulier lorsqu'il ne reste qu'environ 1 jour avant la fin de l'événement, un compte à rebours contextuel sera utilisé. Ce compte à rebours est défini en haut de la page d'accueil de l'ensemble du site (bien sûr, il peut également être défini à d'autres endroits, comme au milieu de la page d'accueil, etc.), et la fenêtre contextuelle est configurée pour disparaître automatiquement après 10 secondes. C'est à l'utilisateur de décider s'il souhaite cliquer sur la page d'activité correspondante et acheter le produit.

Support technique requis : CSS3, bibliothèque jQuery

Le code HTML est le suivant :

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

Le code css est le suivant :

.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;}

Le code JavaScript est le suivant :

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

C'est l'effet de compte à rebours que j'ai écrit moi-même. Bien sûr, chacun peut définir l'effet de compte à rebours selon ses propres préférences. Par exemple, vous ne pouvez afficher que « jours, heures, minutes et minutes », mais j'estime personnellement que régler « jours, heures, minutes et secondes » n'est pas une atmosphère suffisante. Les styles ici peuvent également être modifiés selon vos propres préférences, mais l'effet final est de créer une atmosphère enflammée avant l'événement.

En ce qui concerne le code html, le code css et le code JavaScript ici, veuillez noter :

Je n'entrerai pas dans les détails du code 1.html. L'essentiel est de savoir comment configurer le dom pour faciliter le fonctionnement de JavaScript ;

Code 2.css, utilise ici principalement les pseudo-classes :before et :after pour définir l'effet tridimensionnel de la valeur du compte à rebours

3. Le code JavaScript est également une fonction très simple. Ici, vous devez convertir le temps restant en chaîne pour faciliter l'interception et l'affichage de la chaîne. De plus, utilisez la fonction setTimeout pour définir la fonction à exécuter toutes les 1 seconde afin d'afficher dynamiquement le temps restant. Bien sûr, vous pouvez également utiliser la fonction setInterval. Les effets de ces deux paramètres de fonction sont fondamentalement les mêmes.

À ce stade, un simple effet de compte à rebours est créé. Si vous souhaitez définir un compte à rebours pour la fenêtre contextuelle sur la page d'accueil, vous pouvez définir l'arrière-plan pour qu'il soit plus frais pour inciter les utilisateurs à cliquer, et configurer la fenêtre contextuelle pour qu'elle disparaisse automatiquement après 10 secondes (ou définir un bouton de fermeture, etc. .).

Il existe de nombreuses façons de mettre en œuvre le compte à rebours. Je présenterai celle-ci ici en premier et je continuerai à la résumer lorsque j'aurai le temps.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde pour comprendre le javascript.