suchen

Heim  >  Artikel  >  Web-Frontend  >  Native js implementiert die Countdown-Funktion für die Feiertage (Code im Anhang)

Native js implementiert die Countdown-Funktion für die Feiertage (Code im Anhang)

亚连
亚连Original
2018-05-19 13:37:303276Durchsuche

In diesem Artikel wird hauptsächlich der Beispielcode für die Implementierung der Feiertagszeit-Countdown-Funktion in nativem JS geteilt. Interessierte Freunde können vorbeikommen und sich das Ganze gemeinsam ansehen.

Wichtige Wissenspunkte

1. Umsetzungsprinzip:

Endzeit nutzen – aktuell Zeit = Zeitunterschied

Der Zeitunterschied zur aktuellen Zeit verringert sich natürlich jedes Mal um 1 Sekunde, wenn 1 Sekunde vergeht

Daher muss die aktuelle Zeit alle 1 Sekunde aktualisiert werden, um den Countdown-Effekt zu erzielen

2. Auf die Umrechnung zwischen den Zeiten und die Verarbeitung der erhaltenen Werte muss geachtet werden

3. Verwendete Methoden: 

obj.getTime() //换算成毫秒
Math.floor() //把小数点向下舍入结果取一个整数
50%24 // 这是对数值求余的方法，意思是 假如有50个小时，一天24个小时 这个得出的结果就是 余数是2

Der vollständige Code enthält detaillierte Kommentare für bestimmte numerische Berechnungen

Vollständiger Code

Hinweis: Der Code enthält das Standardformat und die Countdown-Tage. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
</style>
</head> 
<body>
 <p id="time"></p>
 <br/>
 <p id="day"></p>
 <br/>
 <p id="tm"></p>
 <script type="text/javascript"> 
 //在页面加载完后立即执行多个函数完美方案。
 function addloadEvent(func){
  var oldonload=window.onload;
  if(typeof window.onload !="function"){
   window.onload=func;
  }
  else{
   window.onload=function(){
    if(oldonload){
     oldonload(); 
    }
    func();
   }
  }
 }
 addloadEvent(showTime);
 addloadEvent(day);
 addloadEvent(tb);
 //在页面加载完后立即执行多个函数完美方案over。
 //天时秒分倒计时
 function tb(){
 var myDate=new Date();//获取当前时间
 var endtime=new Date("2018,1,1");//获取结束时间
 //换算成秒 小数点向下舍入取整
 var ltime=Math.floor((endtime.getTime()-myDate.getTime())/1000);
 //console.log(ltime)
 //换算成天 小数点向下舍入取整
 var d=Math.floor(ltime/(24*60*60));
 //换算成小时取去掉天数的余数（也就是小时） 小数点向下舍入取整
 var h=Math.floor(ltime/(60*60)%24);
 //换算成分钟取去掉小时的余数（也就是分钟） 小数点向下舍入取整
 var m=Math.floor(ltime/60%60);
 //换算成分钟取去掉分钟的余数（也就是秒） 小数点向下舍入取整
 var s=Math.floor(ltime%60);
 document.getElementById("tm").innerHTML="距2018年元旦还有:"+d+"天"+h+"小时"+m+"分钟"+s+"秒";
 if(ltime<=0){
  document.getElementById("tm").innerHTML="元旦快乐！";
  clearTimeout(tb);
 }
 setTimeout(tb,1000);
 }
 //当秒数为个位数时前面+字符串0
 function checkTime(i){
 return i<10? "0"+i:""+i;
 }
 //当前时间标准格式
 function showTime(){
 var myDate=new Date();//获取当前时间
 var year=myDate.getFullYear();//获取年份
 var month=myDate.getMonth()+1;//获取月份是0-11的数字所以+1
 var date=myDate.getDate();//日
 var day=myDate.getDay();//
 var h=myDate.getHours();//小时
 var m=myDate.getMinutes();//分钟
 var s=myDate.getSeconds();//秒
 checkTime(m);
 checkTime(s);
 //console.log(day)
 var week="日一二三四五六".charAt(day);
 document.getElementById("time").innerHTML=year+"年"+month+"月"+date+"日"+"星期"+week+h+":"+m+":"+s;
 setTimeout(showTime,1000); 
 }
 //倒计时天数计算
 function day(){
 var myDate=new Date();//获取当前时间
 var endtime=new Date("2018,1,1");//获取结束时间
 //先换算成毫秒再相减就是时间差，再除以一天的毫秒数结果是带有小数点的，用math方法进一位取整
 var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
 document.getElementById("day").innerHTML="距2018年元旦还有:"+ltime+"天";
 }
 </script>
</body> 
</html>

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Verwendung der Ereignisdelegation in JS

Yuansheng JS erstellt eine Lotterieseite

p5.jsImplementierung der Golden-Spiral-Animation

Das obige ist der detaillierte Inhalt vonNative js implementiert die Countdown-Funktion für die Feiertage (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte Erläuterung der Kodierung und Dekodierung von JavaScript-Zeichensätzen für Sie (grafisches Tutorial)Nächster Artikel：Detaillierte Erläuterung der Kodierung und Dekodierung von JavaScript-Zeichensätzen für Sie (grafisches Tutorial)

In Verbindung stehende Artikel

Mehr sehen