js 타이머 카운트다운 효과 실현

2115 단어 js카운트다운
본 논문 의 사례 는 js 타이머 가 카운트다운 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
날짜 함수

카운트다운  장래의 시간 을 쓰다  -   지금의 시간 
질문:미래 시간 거리 1970 밀리초   -     1970 년 1 월           
미래의 밀리초 로-  현재 밀리초 수   계속 바 꾸 시 면 됩 니 다.

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 body{
  font-size:30px;
  text-align: center;
  color:red;
 }
 </style>
 <script>
 window.onload = function(){
  var demo = document.getElementById("demo");
  var endTime = new Date("2017/11/12 17:30:00"); //     
  setInterval(clock,1000); //      
  function clock(){
  var nowTime = new Date(); //            
  // console.log(nowTime.getTime());        
  var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
  //          -       / 1000                   
  // console.log(second);
   //     3600  
  // second / 3600        /24   
  var d = parseInt(second / 3600 / 24); //  
  //console.log(d);
  var h = parseInt(second / 3600 % 24) //   
  // console.log(h);
  var m = parseInt(second / 60 );
  //console.log(m);
  var s = parseInt(second ); //     
  console.log(s);
  /* if(d<10)
  {
   d = "0" + d;
  }*/
  d<10 ? d="0"+d : d;
  h<10 ? h="0"+h : h;
  m<10 ? m="0"+m : m;
  s<10 ? s="0"+s : s;
  demo.innerHTML = "        : "+d+"  "+h+"   "+m+"   "+s+" ";

  }
 }
 </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
더 많은 내용 참고 바 랍 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기