> 웹 프론트엔드 > JS 튜토리얼 > jQuery_jquery를 기반으로 한 카운트다운 구현 코드

jQuery_jquery를 기반으로 한 카운트다운 구현 코드

WBOY
풀어 주다: 2016-05-16 17:53:06
원래의
958명이 탐색했습니다.

온라인 데모: http://demo.jb51.net/js/2012/mydaojishi/
패키지 다운로드: mydaojishi_jb51
핵심 코드:

코드 복사 코드는 다음과 같습니다.

$(function(){
var tYear = ""; //연도 입력
var tMonth = ""; //입력 월
var tDate = ""; //입력 날짜
var iRemain = ""; 시작 및 끝
var sDate = ""; //카운트다운 일수
var sHour = ""; //카운트다운 시간
var sMin = ""; //카운트다운 분
var sSec = " "; //카운트다운을 위한 초수
var sMsec = ""; //밀리초 수
//일반 도구 기능으로, 한 자리에 0을 더하고, 앞에 더할 숫자를 설정에 따라 설정합니다. N 매개변수 0을 전달했습니다
function setDig(num,n){
var str = "" num
while(str.lengthstr="0" str
}
return str;
}
//일, 시, 분, 초의 차이를 가져옵니다
function getdate(){
//시작 시간과 종료 시간의 날짜 객체 생성
var oStartDate = new Date();
var oEndDate = new Date()
//텍스트 상자 값 가져오기
tYear = $("#tyear").val(); 🎜>tMonth = $ ("#tmonth").val();
tDate = $("#tdate").val()
//종료 시간 설정
oEndDate.setFullYear(parseInt (tYear));oEndDate.setMonth(parseInt(tMonth)-1);
oEndDate.setDate(parseInt(tDate))
oEndDate.setMinutes( 0);
oEndDate.setSeconds(0);
//시작 및 종료 시간의 초를 찾습니다(1000으로 나눔)
iRemain = (oEndDate.getTime() - oStartDate.getTime()) /1000;
//총 초 수를 하루의 초 수로 나눈 후 정수 부분을 빼서 ​​일수를 구합니다.
sDate = setDig(parseInt(iRemain/(60*60*24)),3)
//총 초 수를 하루의 초 수로 나눈 나머지를 취합니다. 즉, 정수 일수를 빼면 그 이후 남은 총 초수입니다.
iRemain %= 60*60*24;
//남은 총 시간을 한 시간의 초 수로 나눈 다음 정수 부분을 취해 시간 수를 구합니다.
sHour = setDig(parseInt(iRemain/(60*60)),2)
//남은 총 초를 한 시간의 초 수로 나눈 후 나머지를 가져옵니다. 시간이 차감된 후 남은 총 시간(초)입니다.
iRemain %= 60*60;
//남은 총 시간을 1분의 초 수로 나눈 다음 정수 부분을 취하여 분 수를 구합니다.
sMin = setDig(parseInt(iRemain/60),2)
//남은 총 시간을 1분의 초 수로 나눈 후 나머지를 가져옵니다. 총 시간(초)을 뺀 후입니다.
iRemain%=60;//남은 초
sSec = setDig(iRemain,2)
//밀리초
sMsec = sSec*100; >//표시된 시간 변경
function updateShow(){
$(".showdatespan").text(tYear "-" tMonth "-" tDate)
$(".countspan" ).each(function(index, element) {
if(index==0){
$(this).text(sDate);
}else if(index==1){
$(this).text(sHour);
}else if(index == 2){
$(this).text(sMin)
}else if(index == 3 )
$(this).text(sSec);
}else if(index == 4){
$(this).text(sMsec)
}
}) ; 🎜>}
//1초마다 시간 업데이트 수행
function autoTime(){
getdate()
//0보다 작으면 호출 자체를 지우고 반환
if(iRemain< 0){
clearTimeout(setT);
return;
}
updateShow()
var setT = setTimeout(autoTime,1000); 타이밍 시작 버튼
$("button").click(function(){
autoTime();
})
})



주의가 필요한 기록 포인트:

1. 모듈로 연산:

iRemain %= 60*60*24;
이 예에서 나머지는 숫자입니다. 정수를 제거한 후 남은 시간(초)입니다.
2. 도구 함수 setDig(num,n)는 전달된 매개변수에 따라 전달된 숫자 앞에 자동으로 0을 추가할 수 있습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿