Heim > Web-Frontend > js-Tutorial > js implementiert Countdown- und Zeitobjekte

js implementiert Countdown- und Zeitobjekte

高洛峰
Freigeben: 2017-01-04 09:45:53
Original
1447 Leute haben es durchsucht

Der JS-Code zum Implementieren des Countdown-Effekts lautet wie folgt:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>h
<style>
#box {
 width: 100%;
 height: 400px;
 background: black;
 color: #fff;
 font-size:40px;
 line-height:400px;
 text-align:center;
}
</style>
<script>
window.onload = function(){
 var oBox = document.getElementById(&#39;box&#39;);
 var oDate = new Date();//获取当前时间;
 oDate.setFullYear(2016,11,31);//自动进位;
 oDate.setHours(0,0,0,0);
 
 function countDown(){
  //未来时间戳减去现在时间的时间戳;
  var ms = oDate.getTime() - new Date().getTime();
 
  //毫秒转换成秒
  var oSec = parseInt(ms/1000);
 
  //秒转换成天
  var oDay = parseInt(oSec/86400);
 
  //不到一天剩下的秒数;
  oSec%=86400;
 
  //转换成小时
  var oHour = parseInt(oSec/3600);
 
  //不到一小时剩下的秒数;
  oSec%=3600;
 
  //转换成分钟
  var oMin = parseInt(oSec/60);
 
  //不到一分钟剩下的秒数;
  oSec%=60;
 
  oBox.innerHTML = &#39;距离2016年12月31日还有:&#39;+oDay+&#39;天&#39;+oHour+&#39;时&#39;+oMin+&#39;分&#39;+oSec+&#39;秒&#39;;
 } 
 countDown();
 setInterval(countDown,1000);
}
</script>
</head>
 
<body>
<div id="box">距离2016年12月31日还有:xx天xx时xx分xx秒</div>
</body>
</html>
Nach dem Login kopieren

Der Implementierungseffekt ist wie folgt:

js implementiert Countdown- und Zeitobjekte

Zeitstempel: Millisekunden von Januar 1970 bis heute Nummer: oDate.getTime(); //Fragen Sie mich nicht, warum es von Januar 1970 bis heute ist! Geh nach Baidu!
Zeitobjekt:

Zeit abrufen:

var oDate = new Date();
oYear = oDate.getFullYear();
oMon = oDate.getMonth();
oDay = oDate.getDate();
oHou = oDate.getHours();
oMin = oDate.getMinutes();
oSec = oDate.getSeconds();
oWeek = oDate.getDay();
Nach dem Login kopieren

Zeit einstellen:

oDate.setFullYear(年,月,日);
oDate.setMonth(月);
oDate.setDate(日);
oDate.setHours(时,分,秒,毫秒);
时间会自动进位;
Nach dem Login kopieren

Das war’s auch schon, und es gibt sie Es gibt viele Mängel, ich hoffe, dass jeder weitere wertvolle Meinungen abgeben kann! Voneinander lernen! Voneinander lernen!

Weitere Artikel zur js-Implementierung von Countdown- und Zeitobjekten finden Sie auf der chinesischen PHP-Website!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage