javascript_javascript 기술을 기반으로 밀리초 단위로 정확한 카운트다운 기간 한정 세일 구현

이 글은 기간 한정 세일 카운트다운의 자바스크립트 구현을 공유하며, 참조용으로 밀리초 단위의 정확한 카운트다운을 제공합니다.

1. 렌더링

아래 사진은 주화수안의 기간 한정 잡기 효과입니다

2. 제한된 시간 잡기 효과를 얻기 위해 필요한 지식: Javascript Date() 객체
Date()는 현재 날짜와 이벤트를 반환합니다
getYear()는 연도를 반환하는 것이 가장 좋습니다
getFullYear() 작동 방법(2016년 전체 형식)
getMonth()는 월 값을 반환합니다(0부터 +1까지)
getDay()는 요일(0-6)을 반환합니다
getHours()는 시간(0-23)을 반환합니다.
getMinutes()는 분 수(0-59)를 반환합니다
getSeconds()는 초 수를 반환합니다.
getTime()은 밀리초 수를 반환합니다
물론, 위의 호출 방법을 모두 사용하지 않을 수도 있습니다. 필요에 따라 다르겠지만, 바로 코드로 넘어가겠습니다.
1. HTML 페이지 코드:
b622ab5e3a3049e3388f467fd150822794b3e26ee717c64999d7867364b1b4a3
남은 시간과 함께 e388a4556c0f65e1904146cc1a846bee 태그에 카운트다운 내용을 넣었습니다.
2. JS 스크립트:

$(function(){
  function leftTime(){
    var endTime = new Date("2016/5/20,12:00:00");//结束时间
    var curTime = new Date();//当前时间
    var leftTime = parseInt((endTime.getTime() - curTime.getTime())/1000);//获得时间差
    //小时、分、秒需要取模运算
    var d = parseInt(leftTime/(60*60*24));
    var h = parseInt(leftTime/(60*60)%24);
    var m = parseInt(leftTime/60%60);
    var s = parseInt(leftTime%60);
    var ms = parseInt(((endTime.getTime() - curTime.getTime())/100)%10);
    var txt = "剩余："+d+"天"+h+"小时"+m+"分钟"+s+"."+ms+"秒";
    $(".left-time").text(txt);
    if(leftTime<=0){ $(".left-time").text("团购结束");}
  };
  leftTime();
  var set = setInterval(leftTime,100);
});

위의 js는 제한된 시간 캡처의 간단한 예를 구현합니다. parsInt() 메서드는 반올림되며, getTime()은 시간을 밀리초로 변환합니다.parseInt() 메서드 외에 Math.floor( )는 반올림으로 대체됩니다.

마지막으로, 시간이 끝났을 때 표시해야 할 내용을 결정하기 위해 if()를 제공하는 것을 잊지 마세요. 그렇지 않으면 불필요한 버그가 나타날 것입니다!