残り時間をバーの長さで示す
JavaScriptでページに表示している画像の大きさを変えることができます。
Mission25
残り時間をバーの長さで示す
完成までの残り時間をバーの長さで示すようにします。
function timer()関数内、
allget("BOU","<img src='image/tb.gif' width='"+Math.ceil(c/1000)+"'
height='10' border='0'>");でバーを短くして置き換えます。
バーの長さを決めるのは、Math.ceil(c/1000)の部分です。cは残り時間、単位はミリ秒です。180000から10ずつ徐々に減って行きます。180000は値が大きすぎるので1000で割って秒単位にします。その値を更にMath.ceil()を使って小数点以下を切り上げます。
<html>
…
…
f=0;
function timers()
{
f=1;
allget("S","<input type='button' value='リセット' onclick='timerr1()'>");
c=180000;
setTimeout("timer()",10);
}
function timerr1()
{
f=0;
allget("S","リセットしています");
setTimeout("timerr2()",1000);
}
function timerr2()
{
allget("S","<input type='button' value='3分待つだけ' onclick='timers()'>");
allget("MATI","<b><font size='+1'>完成まで 03:00:000</font></b>");
allget("BOU","<img src='image/tb.gif' width='180' height='10' border='0'>");
}
function timer()
{
if(f!=1) return;
c=c-10;
allget("MATI","<b><font size='+1'>完成まで "+c+"ミリ秒</font></b>");
allget("BOU","<img src='image/tb.gif' width='"+Math.ceil(c/1000)+"' height='10' border='0'>");
setTimeout("timer()",10);
}
function timers()
{
f=1;
allget("S","<input type='button' value='リセット' onclick='timerr1()'>");
c=180000;
setTimeout("timer()",10);
}
function timerr1()
{
f=0;
allget("S","リセットしています");
setTimeout("timerr2()",1000);
}
function timerr2()
{
allget("S","<input type='button' value='3分待つだけ' onclick='timers()'>");
allget("MATI","<b><font size='+1'>完成まで 03:00:000</font></b>");
allget("BOU","<img src='image/tb.gif' width='180' height='10' border='0'>");
}
function timer()
{
if(f!=1) return;
c=c-10;
allget("MATI","<b><font size='+1'>完成まで "+c+"ミリ秒</font></b>");
allget("BOU","<img src='image/tb.gif' width='"+Math.ceil(c/1000)+"' height='10' border='0'>");
setTimeout("timer()",10);
}
…
</html>
</html>
                             |
プログラムの実行結果が表示されます。