Image Counter

プログラムの説明

Count Image はパラメータで渡されたカウント(num)を CSS Sprite を使って画像で表示します。

渡されたパラメータを para() 関数で取得します。
今回のパラメータは num だけですが、複数のパラメータに対応出来るように汎用的なソースコードです。
num は整数なので parseInt() で明示的に int に変換しています。
パラメータが渡されなかったとき(最初の呼び出し)では、桁上がりが確認できるように 789 を設定してみました。

function para()
{   param = new Array();
    if (window.location.search.length>4)
    {   var query = window.location.search.substring(1);
        var parameters = query.split('&');
        for(i=0; i<parameters.length; i++)
        {   var element = parameters[i].split('=');
            var paramName = decodeURIComponent(element[0]);
            var paramValue = decodeURIComponent(element[1]);
            param[paramName] = paramValue;
        }
        num = parseInt(param["num"]);
    }
    else num = 789;
}

<body> から num を取得して disp(num); でカウンターを表示します。
para(); disp(num);

disp(num) 関数では５桁のカウンターを一桁ずつ cut() 関数で描画します。

function disp(n)
{   wk= n;
    for(i=0; i<5; i++)
    {   cut(wk%10, (6-i)*60);
        wk= Math.floor(wk/10);
    }
}

一桁の数字を描画する cut() 関数です。
n が数字で p が印字する座標です。
num.gif は 60*60 の０～９の数字が並んでいます。
CSS Sprite の座標は画像全体の左上を基点に計算します。

function cut(n, p)
{   var s1 = '(0px,' + (n+1)*60 + 'px,60px,' + n*60 + 'px);';       //上, 右, 下, 左
    var pos = -(n*60)+p; 
    var s2 = ' position:absolute;left:' + pos + 'px;top:100px;';
    var s = '<img src="num.gif" style="clip:rect' + s1 + s2 + '">';
    document.write(s);
}

マウスのクリックでカウントアップして countimg.html を呼び直します。

window.onmousedown = mousedown;

function mousedown()
{   num = Math.floor(num+1);
    location.href = "countimg.html?num=" + num;
}