4つの機能を1つの機能に統合

Question

私は1つのページに4つのカウンタを持っています。私はそれぞれの機能に対して別個の機能を呼び出しました。すべての機能を単一機能に統合する必要があります。

var tt1 = setInterval(function() { 
 
    startTimee() 
 
}, 50); 
 
var counter1 = 1; 
 

 
function startTimee() { 
 
    if (counter1 == 10) { 
 
    clearInterval(tt1); 
 
    } else { 
 
    counter1++; 
 
    } 
 
    document.getElementById('counter1').innerHTML = counter1; 
 

 
} 
 
var tt = setInterval(function() { 
 
    startTime() 
 
}, 5); 
 
var counter = 1; 
 

 
function startTime() { 
 
    if (counter == 600) { 
 
    clearInterval(tt); 
 
    } else { 
 
    counter++; 
 
    } 
 
    document.getElementById('counter2').innerHTML = counter; 
 
} 
 
var tt2 = setInterval(function() { 
 
    startTime2() 
 
}, 50); 
 
var counter2 = 1; 
 

 
function startTime2() { 
 
    if (counter2 == 30) { 
 
    clearInterval(tt2); 
 
    } else { 
 
    counter2++; 
 
    } 
 
    document.getElementById('count3').innerHTML = counter2; 
 
} 
 
var tt3 = setInterval(function() { 
 
    startTime3() 
 
}, 50); 
 
var counter3 = 1; 
 

 
function startTime3() { 
 
    if (counter3 == 6) { 
 
    clearInterval(tt3); 
 
    } else { 
 
    counter3++; 
 
    } 
 
    document.getElementById('counter4').innerHTML = counter3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter1">10</div> 
 
<div id="counter2">600</div> 
 
<div id="counter3">30</div> 
 
<div id="counter4">6</div>

Answer 1

あなたが何か行うことができます：それははるかに最も最適なコードではありませんが、それがあなたのためだけの例である

var time = 1, interval = setInterval(tick, 50); 
 

 
function tick() 
 
{ 
 
    if (time <= 10) 
 
    document.getElementById('counter1').innerHTML = time; 
 

 
    if (time <= 600) 
 
    document.getElementById('counter2').innerHTML = time; 
 

 
    if (time <= 30) 
 
    document.getElementById('counter3').innerHTML = time; 
 

 
    if (time <= 6) 
 
    document.getElementById('counter4').innerHTML = time;  
 

 
    if (++time > 600) 
 
    clearInterval(interval); 
 
}

<p id="counter1"></p> 
 
<p id="counter2"></p> 
 
<p id="counter3"></p> 
 
<p id="counter4"></p>

を主な原則を得る。

Answer 2

値の取得元に応じて、これを実行するには2通りの方法があります。

最初のオプションは、のidとカウントする最大値を保持するオブジェクトを作成することです。

var countCeiling = { 
 
    counter1: { 
 
    end: 10 
 
    }, 
 
    counter2: { 
 
    end: 600, 
 
    start: 0 
 
    }, 
 
    counter3: { 
 
    end: 30, 
 
    start: 0 
 
    }, 
 
    counter4: { 
 
    end: 6, 
 
    start: 0 
 
    } 
 
}; 
 

 
var timerID = setInterval(function() { 
 
    var stopTimer = true; 
 

 
    for (var id in countCeiling) { 
 
    var data = countCeiling[id]; 
 
    var span = document.getElementById(id); 
 

 
    var val = data.current || data.start || 0; 
 

 
    data.current = val + 1; 
 

 
    if (val <= data.end) { 
 
     span.innerHTML = val; 
 
     stopTimer = false; 
 
    } 
 

 
    } 
 

 
    if (stopTimer) { 
 
    clearInterval(timerID); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter1">10</div> 
 
<div id="counter2">600</div> 
 
<div id="counter3">30</div> 
 
<div id="counter4">6</div>