Heim > Artikel > Web-Frontend > JavaScript-Implementierung des Countdown-Codesegments Item1 (sehr praktisch)_Javascript-Kenntnisse

JavaScript-Implementierung des Countdown-Codesegments Item1 (sehr praktisch)_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:33:461250Durchsuche

Heutzutage verwenden Gruppenkauf-Websites, E-Commerce-Websites, Portal-Websites usw. häufig Zeit, um wichtige Momente aufzuzeichnen, z. B. Zeitanzeige, Countdown-Zeitunterschied, zeitlich begrenzte Verkäufe usw. In diesem Artikel werden die Berechnungsideen und -methoden analysiert verschiedene Countdown-Effekte und beherrscht das Datumsobjekt Date. Methoden zum Ermitteln der Zeit, Methoden zum Berechnen von Zeitunterschieden und Erzielen verschiedener Countdown-Effekte.

1. Einfache Zeitanzeige

Erklären Sie das Datumsobjekt „Datum“ und erhalten Sie Stunden, Minuten, Sekunden usw. über dieses Objekt, sodass Sie den erforderlichen Zeitinhalt frei extrahieren können.

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

Ergebnisse anzeigen:

2. Countdown-Zeitunterschied

Erklären Sie Methoden wie gettime() und die Berechnung der Zeit und lernen Sie die Anzahl der Tage zwischen den Zeiten kennen.

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

Anzeigeeffekt:

3. Zeitlich begrenzter Verkauf

So verwenden Sie Datumsobjekte und -methoden, um die Differenz in Tagen, Stunden, Minuten und Sekunden zu berechnen.

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

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：Klicken Sie basierend auf JavaScript auf das Bild auf dem mobilen Endgerät, um das größere Bild anzuzeigen. Klicken Sie auf das größere Bild, um die Javascript-Kenntnisse auszublendenNächster Artikel：Klicken Sie basierend auf JavaScript auf das Bild auf dem mobilen Endgerät, um das größere Bild anzuzeigen. Klicken Sie auf das größere Bild, um die Javascript-Kenntnisse auszublenden

In Verbindung stehende Artikel

Mehr sehen