ゆったりした動作
プログラミングにおいてゆったりした動作を表現するにはそれなりの工夫が必要です。高速な動作を目視で確認することは難しいです。状態が遷移するたびに音を鳴らすには認識できる時間が必要です。
JavaScriptではこのような処理を制御する関数として、setTimeout, setIntervalが用意されておりゆったりした動作を実現することができます。
動作例
棒グラフの描画をゆったりした動作で表示しました。終わりがありませんのでブラウザを終わらせるなどして強制終了させます。
冬季オリンピックのスピード競技のテレビ放映において、周回コースの進捗度を実態に合わせて表示していました。時間要素をプログラミングに反映させるのは高度な分野に属すると言えましょう。
プログラムサンプルコード
<html>
<head>
<meta charset="utf-8">
</head>
<body onload="barGraph0();">
<Div style="width:600px; margin:0 auto;">
<div id="k0" style="width:600px; height:40px; font-size:30px;"></div>
<div id="k1" style="width:600px; height:40px; font-size:30px;"></div>
<div id="k2" style="width:600px; height:40px; font-size:30px;"></div>
<div id="k3" style="width:600px; height:40px; font-size:30px;"></div>
<div id="k4" style="width:600px; height:40px; font-size:30px;"></div>
</Div>
<script type="text/javascript" charset="utf-8">
const number = [9, 7, 11, 10, 12, 8, 6]; //表示個数
const kajitu = ["🍇", "🍈", "🍌", "🍍", "🍒"]; //果実
let count0=count1=count2=count3=count4=ct=0; //グローバル変数
function barGraph0(){ //棒グラフ0
document.getElementById("k0").innerHTML += kajitu[ct % kajitu.length];
if(++count0 < number[ct % number.length]) setTimeout('barGraph0()', 60);
else {++ct;count1=0;document.getElementById("k1").innerHTML="";setTimeout('barGraph1()', 300);}
}
function barGraph1(){ //棒グラフ1
document.getElementById("k1").innerHTML += kajitu[ct % kajitu.length];
if(++count1 < number[ct % number.length]) setTimeout('barGraph1()', 60);
else {++ct;count2=0;document.getElementById("k2").innerHTML="";setTimeout('barGraph2()', 300);}
}
function barGraph2(){ //棒グラフ2
document.getElementById("k2").innerHTML += kajitu[ct % kajitu.length];
if(++count2 < number[ct % number.length]) setTimeout('barGraph2()', 60);
else {++ct;count3=0;document.getElementById("k3").innerHTML="";setTimeout('barGraph3()', 300);}
}
function barGraph3(){ //棒グラフ3
document.getElementById("k3").innerHTML += kajitu[ct % kajitu.length];
if(++count3 < number[ct % number.length]) setTimeout('barGraph3()', 60);
else {++ct;count4=0;document.getElementById("k4").innerHTML="";setTimeout('barGraph4()', 300);}
}
function barGraph4(){ //棒グラフ4
document.getElementById("k4").innerHTML += kajitu[ct % kajitu.length];
if(++count4 < number[ct % number.length]) setTimeout('barGraph4()', 60);
else {++ct;count0=0;document.getElementById("k0").innerHTML="";setTimeout('barGraph0()', 300);}
}
</script>
</body>
</html>