0から始まり5までいったらまた0からスタートする

投稿者: Anonymous

数字の0から1msごとに+1していき、5になったらまた0からスタートするプログラムを書きたいです。考え方が浮かびません。。考え方のアルゴリズムを教えていただきたいです。

解決

アルゴリズムが分からないというよりは、コードにしていく過程でつまづかれているのかな、と思いました。
できるだけ小さい単位でコードを追加し、テストするようにするとよいです。
常に追加している機能の部分以外はテスト済みで、間違いが無い、と安心できるようにしておきたい所です。

以下は例です。追加部分は小く、追加部分以外のコードは動く、という形を保っています。
もちろん、完成後にコードを整理する必要はあるかもしれません。
(追記: ここで「テスト」としているのは「動かしてみる」という程度の意味です)

最低限のコードでテスト

まず、カウントを記憶させるcount変数を作ります。「数字の0から」なので、0を代入しておきます。

var count = 0;

次にカウントを表示するcount_show関数を作ります。
HTMLに id=”count” の要素を用意しておくものとします。

var count_show_elm = document.getElementById("count");
function count_show(){
    count_show_elm.textContent = count;
}

ここらへんでcount_show関数を一度呼んでみて、テストしておきす。
カウント: 0 が表示されれば成功です。

_x000D_

_x000D_

var count = 0;_x000D_
_x000D_
var count_show_elm = document.getElementById("count");_x000D_
function count_show(){_x000D_
    count_show_elm.textContent = count;_x000D_
}_x000D_
_x000D_
count_show();

_x000D_

<p> カウント:_x000D_
     <span id="count"></span>_x000D_
</p>

_x000D_

_x000D_

_x000D_

最小限の機能追加でテスト

次にカウントを変化させるcount_change関数を作ります。
count変数に1を足した後にcount_show関数を呼び出し、表示を更新する事にします。
今は最小限の追加なので、5を超えた場合の事は後で考えます。

function count_change(){
    count += 1;
    count_show();
}

これもすぐテストします。
カウント: 1 になれば成功です。

_x000D_

_x000D_

var count = 0;_x000D_
_x000D_
var count_show_elm = document.getElementById("count");_x000D_
function count_show(){_x000D_
    count_show_elm.textContent = count;_x000D_
}_x000D_
_x000D_
function count_change(){_x000D_
    count += 1;_x000D_
    count_show();_x000D_
}_x000D_
_x000D_
count_show();_x000D_
count_change();

_x000D_

<p> カウント:_x000D_
     <span id="count"></span>_x000D_
</p>

_x000D_

_x000D_

_x000D_

動きのある物は観察しやすい形でテスト

次にcount_change関数を呼ぶのを一定時間おきに繰り返すようにします。
観察しやすいように、とりあえず一秒毎にしておきます。

setInterval(count_change, 1000);

これもすぐにテストします。

_x000D_

_x000D_

var count = 0;_x000D_
_x000D_
var count_show_elm = document.getElementById("count");_x000D_
function count_show(){_x000D_
    count_show_elm.textContent = count;_x000D_
}_x000D_
_x000D_
function count_change(){_x000D_
    count += 1;_x000D_
    count_show();_x000D_
}_x000D_
_x000D_
count_show();_x000D_
setInterval(count_change, 1000);

_x000D_

<p> カウント:_x000D_
     <span id="count"></span>_x000D_
</p>

_x000D_

_x000D_

_x000D_

つまづきがちな機能は、他が完全に動いている事が確信できる環境で追加

count_change関数に5を超えた場合はcount変数を0に戻す処理を入れて完成です。

function count_change(){
    count += 1;
    if(count > 5){
        count = 0;
    }
    count_show();
}

_x000D_

_x000D_

var count = 0;_x000D_
_x000D_
var count_show_elm = document.getElementById("count");_x000D_
function count_show(){_x000D_
    count_show_elm.textContent = count;_x000D_
}_x000D_
_x000D_
function count_change(){_x000D_
    count += 1;_x000D_
    if(count > 5){_x000D_
        count = 0;_x000D_
    }_x000D_
    count_show();_x000D_
}_x000D_
_x000D_
count_show();_x000D_
setInterval(count_change, 1000);

_x000D_

<p> カウント:_x000D_
     <span id="count"></span>_x000D_
</p>

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *