サイトのタイトル

プログラムを改良する

作ったアプリを改良してより良いものにします。

Mission27
プログラムを改良する
【攻略者リスト】
リファレンス

残り時間の表示を見やすくするためにプログラムを改良します。
時間の表示を00:00:000の形にします
timer()関数内、
m=Math.floor(c/60000);で残り何分かを求めます。60000ミリ秒は1分です。Math.floor()を使って小数点以下を切り捨てるようにしています。
s=Math.floor((c%60000)/1000);で残り何秒かを求めます。c%60000でcを60000で割った余りが出ます。例えば残り2分12秒345ミリ秒の場合、12秒345ミリ秒が余りです。これを1000ミリ秒で割って、小数点以下を切り捨てることで残りの秒数を求めます。
ms=(c%60000)%1000;で残り何ミリ秒かを求めます。
if(s==0) s="00";で残りの秒数が0の時に00と表示するようにしています。
else if(s<10) s="0"+s;で残りの秒数が10より小さい時に変数sの前に0を付けるようにしています。
if(ms==0) ms="000";で残りのミリ秒数が0の時に000と表示するようにします。
else if(ms<100) ms="0"+ms;で残りのミリ秒数が100より小さい時に変数msの前に0を付けるようにしています。

<html>
<head>
<title></title>
<meta charset="UTF-8">
<script language="JavaScript"><!--

function allget(id,html)
{
  if(document.all)
  {
  document.all(id).innerHTML=html;
  }
  else if(document.getElementById)
  {
  document.getElementById(id).innerHTML=html;
  }
}

f=0;
function timers()
{
f=1;
allget("S","<input type= 'button' value='リセット' onclick='timerr1()'>");
document.images["RAMEN"].src= "image/ramenw.gif";
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'>");
document.images["RAMEN"].src= "image/ramen.gif";
}

function timer()
{
if(f!=1) return;
c=c-10;
m=Math.floor(c/60000);
s=Math.floor((c%60000)/1000);
ms=(c%60000)%1000;
if(s==0) s="00";
else if(s<10) s="0"+s;
if(ms==0) ms="000";
else if(ms<100) ms="0"+ms;
allget("MATI","<b><font size= '+1'>完成まで 0"+m+":"+s+": "+ms+"</font></b>");
allget("BOU","<img src= 'image/tb.gif' width='"+Math.ceil(c/1000)+"' height='10' border='0'>");

  if(c==0)
  {
  f=0;
  document.images["RAMEN"].src= "image/ramen.gif";
  allget("S","<input type= 'button' value='3分待つだけ' onclick='timers()'>");
  }
  else
  {
  setTimeout("timer()",10);
  }
}

//--></script>
</head>
<body>

<div align="center">
<table width="350" cellpadding= "6" bgcolor="#ebebeb">
<tbody>
<tr>
<td align="center" bgcolor="#cccccc" height= "20"><div id="S"><input type= "button" value="3分待つだけ" onclick= "timers()"></div></td>
</tr>
<tr>
<td align="center" height="25"><div id= "MATI"><b><font size="+1">完成まで 03:00:000</font></b></div></td>
</tr>
<tr>
<td align="left" height="20"><div id= "BOU"><img src="image/tb.gif" width= "180" height="10" border= "0"></div></td>
</tr>
<tr>
<td align="center"><img src="image/ramen.gif " width="150" height="120" border= "0" name="RAMEN"></td>
</tr>
</tbody>
</table>
</div>

</body>
</html>


プログラムの実行結果が表示されます。