Maison > Article > interface Web > Implémentation JavaScript du segment de code de compte à rebours Item1 (très pratique)_compétences javascript

Implémentation JavaScript du segment de code de compte à rebours Item1 (très pratique)_compétences javascript

WBOYoriginal: 2016-05-16 15:33:461250parcourir

De nos jours, les sites d'achats groupés, les sites de commerce électronique, les sites portails, etc. utilisent souvent le temps pour enregistrer des moments importants, tels que l'affichage de l'heure, le décalage horaire du compte à rebours, les ventes à durée limitée, etc. Cet article analyse les idées et méthodes de calcul de différents effets de compte à rebours et maîtrise l'objet date Date Méthodes pour obtenir l'heure, méthodes pour calculer le décalage horaire et obtenir différents effets de compte à rebours.

1. Affichage simple de l'heure

Expliquez l'objet date Date et obtenez les heures, les minutes, les secondes, etc. grâce à cet objet, vous permettant d'extraire librement le contenu temporel requis.

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
 window.onload = function(){
  showTime();
 }
 function showTime(){
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1;
  var date = myDate.getDate();
  var dateArr = ["日","一",'二','三','四','五','六'];
  var day = myDate.getDay();
  var hours = myDate.getHours();
  var minutes = formatTime(myDate.getMinutes());
  var seconds = formatTime(myDate.getSeconds());
  var systemTime = document.getElementById("time");
  systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
  setTimeout("showTime()",500);
 }
 //格式化时间：分秒。
 function formatTime (i){
  if(i < 10){
   i = "0" + i;
  }
  return i;
 }
 </script>
</head>
<body>
 <div id ='time'></div>
</body>
</html>

Afficher les résultats :

2. Différence horaire du compte à rebours

Expliquez des méthodes telles que gettime() et comment calculer le temps, et apprenez le nombre de jours entre les heures.

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
  window.onload = function(){
   deadTime();
  }
  function deadTime(){
   var nowTime = new Date();
   var finalTime = new Date("2015-11-11");
   var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
   var date = Math.ceil(lefttime);
   document.getElementById("time").innerHTML = date;
  }
 </script>
</head>
<body>
 <div >距离双十一还有：<span id ='time'></span>天</div>
</body>
</html>

Effet d'affichage :

3. Vente à durée limitée

Comment utiliser les objets et méthodes de date pour calculer la différence en jours, heures, minutes et secondes.

<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>
</head>
<body>
<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
 var endtime=new Date("2015/11/11,12:20:12");//结束时间
 var nowtime = new Date();//当前时间
 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
 d=parseInt(lefttime/3600/24);
 h=parseInt((lefttime/3600)%24);
 m=parseInt((lefttime/60)%60);
 s=parseInt(lefttime%60);
 document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
 if(lefttime<=0){
  document.getElementById("LeftTime").innerHTML="团购已结束";
  clearInterval(sh);
 }
}
 FreshTime();
 var sh;
 sh=setInterval(FreshTime,1000);
</script>
</body>
</html>

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：Basé sur JavaScript, cliquez sur l'image sur le terminal mobile pour afficher l'image plus grande. Cliquez sur l'image plus grande pour masquer les compétences Javascript.Article suivant：Basé sur JavaScript, cliquez sur l'image sur le terminal mobile pour afficher l'image plus grande. Cliquez sur l'image plus grande pour masquer les compétences Javascript.

Articles Liés

Voir plus