>  기사  >  웹 프론트엔드  >  카운트다운이 over_jquery인지 확인하기 위해 jquery에 의해 구현된 코드

카운트다운이 over_jquery인지 확인하기 위해 jquery에 의해 구현된 코드

WBOY
WBOY원래의
2016-05-16 15:16:051481검색

이 장에서는 현재 날짜의 카운트다운이 종료되었는지 여부를 확인할 수 있는 코드를 소개합니다. 이 코드에는 쇼핑 웹사이트의 할인 기간과 같은 카운트다운 완료 여부만 확인됩니다. 등. 실제 애플리케이션에서는 이와 유사한 코드가 나타나는 경우가 거의 없지만 시청자에게 약간의 깨달음을 줄 수 있기를 바랍니다.

코드는 다음과 같습니다.

function done(){
var str=$('#end').text(); 
var out=str.match(/\d+/g);
console.log(out); 
var h=parseInt(out[0]),m=parseInt(out[1]),s=parseInt(out[2]); 
console.log(h+'#'+m+'#'+s);
var calc=h*3600+m*60+s;
console.log(calc); 
if(calc==0){
//code
} 
else{
console.log('等待..');
} 
var t=setTimeout('done()',1000);
} 
done(); 

위 내용은 단지 코드 조각일 뿐이며 구현 과정을 소개할 수는 없습니다.

1. 코드 주석:

1.function done(){}, 이 함수는 카운트다운 종료 여부를 판단하는 효과를 구현합니다.
2.var str=$('#end').text(), 지정된 요소의 텍스트 내용을 가져옵니다. 이 코드는 현재 시간을 카운트다운해야 합니다.
3.var out=str.match(/d+/g), 시간과 날짜의 숫자 배열을 가져옵니다.
4.var h=parseInt(out[0]), m=parseInt(out[1]), s=parseInt(out[2]), 각각 시간, 분, 초를 가져옵니다.
5.var calc=h*3600+m*60+s, 초로 변환합니다.
6.if(calc==0){//code}, 카운트다운이 끝났는지 확인한 후 해당 작업을 지정합니다.
7.var t=setTimeout('done()',1000), 매초마다 판단 기능을 실행합니다.
8.done(), 이 함수를 실행합니다.

jquery 카운트다운 코드는 다음과 같습니다.

$(function(){ 
var tYear = ""; //输入的年份 
var tMonth = ""; //输入的月份 
var tDate = ""; //输入的日期 
var iRemain = ""; //开始和结束之间相差的毫秒数 
var sDate = ""; //倒计的天数 
var sHour = ""; //倒计时的小时 
var sMin = ""; //倒计时的分钟 
var sSec = ""; //倒计时的秒数 
var sMsec = ""; //毫秒数 
//通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零 
function setDig(num,n){ 
var str = ""+num; 
while(str.length<n){ 
str="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.setHours(0); 
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; 
//剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。 
sMin = setDig(parseInt(iRemain/60),2) 
//剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。 
iRemain%=60; 
//剩下的秒数 
sSec = setDig(iRemain,2); 
//毫秒数 
sMsec = sSec*100; 
} 
//更改显示的时间 
function updateShow(){ 
$(".showdate span").text(tYear+"-"+tMonth+"-"+tDate); 
$(".count span").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); 
} 
}); 
} 
//每一秒执行一次时间更新 
function autoTime(){ 
getdate(); 
//如果小于零,清除调用自己,并且返回 
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을 추가할 수 있습니다

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.