집 > 기사 > 웹 프론트엔드 > js는 카운트다운 및 시간 객체를 구현합니다.

js는 카운트다운 및 시간 객체를 구현합니다.

高洛峰원래의: 2017-01-04 09:45:531364검색

카운트다운 효과를 구현하는 JS 코드는 다음과 같습니다.

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

구현 효과는 다음과 같습니다.

js는 카운트다운 및 시간 객체를 구현합니다.

타임스탬프: 밀리초 1970년 1월부터 현재까지 Number: oDate.getTime(); //왜 1970년 1월부터 현재인지 묻지 마세요! 바이두로 가세요!
시간 개체:

시간 가져오기:

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();

시간 설정:

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

그게 전부이고 거기에 있습니다 부족한 부분이 많은데, 다들 더 귀중한 의견을 주실 수 있었으면 좋겠습니다! 서로에게서 배워보세요! 서로에게서 배워보세요!

js의 카운트다운 및 시간 개체 구현과 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：json 객체의 속성을 순회하고 동적으로 속성을 추가하는 구현다음 기사：json 객체의 속성을 순회하고 동적으로 속성을 추가하는 구현

js는 카운트다운 및 시간 객체를 구현합니다.

관련 기사