웹javascript 전단 카운트다운 카운터
$(function(){
function countDown(){
normalelapse = 10;
nextelapse = normalelapse;
counter = 0;
startTime = '';
timer = null;
time = new Array();
time[0] = time[1] = time[2] = '00';
}
countDown.prototype.run = function(tm){ //
var timerFunc = this.onTimer;
if(tm<10){
tm = '0' +tm;
}
time[0] = ''+tm;
counter = 0;
startTime = new Date().valueOf();
timer = setInterval(timerFunc,nextelapse);
}
countDown.prototype.insertDom = function(){ //dom
var mli = $('.time-m li');
var sli = $('.time-s li');
var msli = $('.time-ms li');
mli.empty();
sli.empty();
msli.empty();
armli = time[0].split('');
arsli = time[1].split('');
armsli = time[2].split('');
mli.eq('0').append(armli[0]);
mli.eq('1').append(armli[1]);
sli.eq('0').append(arsli[0]);
sli.eq('1').append(arsli[1]);
msli.eq('0').append(armsli[0]);
msli.eq('1').append(armsli[1]);
}
countDown.prototype.onTimer = function(){ //
console.log(time);
if(time[0]==0&&time[1]==0&&time[2]==0){
return;
}
time[2] -= 1;
time[2] += '';
if(time[2]<10&&time[2]>=0){
time[2] = '0' + time[2];
}
if(time[2]<0){
time[2] = '99';
time[1]-= 1;
time[1]+= '';
if(time[1]<10&&time[1]>=0){
time[1] = '0' +time[1];
}
if(time[1]<0){
time[1] = '59';
time[0] -= 1;
time[0] += '';
if(time[0]<10&&time[0]>=0){
time[0] = '0'+time[0];
}
}
}
// dom
countDown.prototype.insertDom(time);
clearInterval(timer);
//
counter++;
var counterSecs = counter * 10;
var elapseSecs = new Date().valueOf() - startTime;
var diffSecs = counterSecs - elapseSecs;
nextelapse = normalelapse + diffSecs;
if (nextelapse < 0) nextelapse = 0;
var timerFunc = countDown.prototype.onTimer;
timer = setInterval(timerFunc, nextelapse);
}
var timeDown = new countDown();
timeDown.run(1);
});
html 아래
<ul>
<li>
<ul class="time-m">
<li class="i-time time-num">0</li>
<li class="i-time time-num">0</li>
</ul>
</li>
<li class="time-d">:</li>
<li>
<ul class="time-s">
<li class="i-time time-num">0</li>
<li class="i-time time-num">0</li>
</ul>
</li>
<li class="time-d">:</li>
<li>
<ul class="time-ms">
<li class="i-time time-num">0</li>
<li class="i-time time-num">0</li>
</ul>
</li>
</ul>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.