計数器
- 0
- 0
- 0
- 0
概要
シンプルな計数器です。各桁の間の色を変えたかったのでカウントした数値を1文字ずつに分けて別々に出力しています。
ページ遷移後もCookieによって数値は30日間保存されます。
コード
HTML
<ul id="count_window">
<li id="digit4">0</li>
<li id="digit3">0</li>
<li id="digit2">0</li>
<li id="digit1">0</li>
</ul>
<div id="countbt_area">
<button id="bt_count" onclick="counter()">カウント</button>
<button class="bt_op" id="bt_reset" onclick="reset()">リセット</button>
<button class="bt_op" id="bt_auto" onclick="autoplay()">AUTO</button>
<button class="bt_op" id="bt_stop" onclick="autostop()">STOP</button>
</div>
JavaScript
var num_now = 0;
var str_now = '';
var digit1,digit2,digit3,digit4;
function counter(){
num_now++;
display();
};
function reset(){
num_now = 0;
display();
}
function display(){
str_now = String(num_now);
if(num_now < 10){
digit4 = '0';
digit3 = '0';
digit2 = '0';
digit1 = str_now;
}else if(num_now < 100){
digit4 = '0';
digit3 = '0';
digit2 = str_now.substr(0,1);
digit1 = str_now.substr(1,1);
}else if(num_now < 1000){
digit4 = '0';
digit3 = str_now.substr(0,1);
digit2 = str_now.substr(1,1);
digit1 = str_now.substr(2,1);
}else if(num_now < 10000){
digit4 = str_now.substr(0,1);
digit3 = str_now.substr(1,1);
digit2 = str_now.substr(2,1);
digit1 = str_now.substr(3,1);
}else{
reset();
}
document.getElementById("digit4").textContent = digit4 ;
document.getElementById("digit3").textContent = digit3 ;
document.getElementById("digit2").textContent = digit2 ;
document.getElementById("digit1").textContent = digit1 ;
}
function autoplay(){
document.getElementById("bt_auto").style.display="none";
document.getElementById("bt_stop").style.display="inline";
timer = setInterval(function(){
counter();
if(num_now >= 9999){
clearInterval(timer);
document.getElementById("bt_auto").style.display="inline";
document.getElementById("bt_stop").style.display="none";
}
},10);
}
function autostop(){
clearInterval(timer);
document.getElementById("bt_auto").style.display="inline";
document.getElementById("bt_stop").style.display="none";
}
function load_rec(){
if(navigator.cookieEnabled){
var cook = document.cookie;
if(cook!=''){
num_now = cook.substr(4);
display();
}
}
}
function record(){
if(navigator.cookieEnabled){
document.cookie = 'num=' + num_now + '; max-age=2592000';
}
}