Implémentation JavaScript du segment de code de compte à rebours Item1 (très pratique)_compétences javascript-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 15:33:46

original

1278 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion