MyCode

計数器

  • 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';
    }
}

最近の投稿

計数器

シンプルな計数器です。各桁の間の色を変えたかった…

HTMLタグエスケープ

HTML中で「<」などの文字を使うと、タグとして認…

ギャラリー

クリック(もしくはタップ)した画像をモーダルウィン…

検索フォーム

そのまま。様々な検索フォームです。ボタン画像はICO…

楽天市場検索順位チェッカー

楽天市場内での検索結果における指定ショップの順位…

mMenu

JavaScriptを使用せずにCSSのみで作られたレスポンシ…