一定時間ごとにサイトの内容を書き換える処理

書き換える部分のhtmlを下記のように記述します。

<p id="sample-button" onclick="sample_counter_start()">[カウントスタート]←クリック</p>
<p id="sample-counter">0</p>

一定時間ごとに書き換えるJavaScriptを下記のように記述します。

//インターバル処理を開始
function sample_counter_start() {
//10ミリ秒ごとにsample_counter_rewriteの実行を開始。返り値野counter_idは処理IDであり、処理をストップする際のIDとなる
var counter_id = setInterval('sample_counter_rewrite()', 10);
//スタートボタンをストップボタンに書き換える　onclick属性の引数に処理IDを指定している
document.getElementById('sample-button').outerHTML = '<p id="sample-button" onclick="sample_counter_stop(\'' + counter_id + '\')">[カウントストップ]←クリック</p>';
}

//カウンターの数値を書き換え
function sample_counter_rewrite(){
//現在のカウンターの値を数値で取得
var current_count = Number(document.getElementById('sample-counter').innerHTML);
//+1する
current_count++;
//カウンターを書き換える
document.getElementById('sample-counter').innerHTML = current_count;
}

//インターバル処理を終了
function sample_counter_stop(counter_id){
//処理IDを指定してインターバル処理を終了
clearInterval(counter_id);
//ストップボタンをスタートボタンに書き換える
document.getElementById('sample-button').outerHTML = '<p id="sample-button" onclick="sample_counter_start()">[カウントスタート]←クリック</p>';
}

実際のサンプル

上記の処理を組込んだのが下記です。クリックでカウント開始/停止します。

[カウントスタート]←クリック

0