カップ麺タイマーの外見を作る
カップ麺タイマーの外見をHTMLで作ります。
Mission21
カップ麺タイマーの外見を作る
カップ麺タイマーの外見はHTMLの記述になります。この作業はHP作成ソフトを使うと簡単に行えます。プログラムの処理に関係する箇所だけ解説します。
<div id="S"><input type="button" value="3分待つだけ"onclick="timers()"></div>はタイマーを開始するボタンです。divタグのidを指定しリセットボタンに置き換えられるようにしています。
<div id="MATI"><b><font size="+1">完成まで03:00:000</font></b></div>は完成までの残り時間をカウントする箇所です。<b>タグは文字を太字にするタグです。fontタグは文字の大きさや色を設定します。size="+1"と設定すると少し大きめの字になります。
<div id="BOU"><img src="image/tb.gif" width="180"height="10" border="0"></div>は残り時間を棒の長さで表す箇所です。divタグを使っているので画像の長さも変更できます。長さを変えるには、width="180"の部分を書き換えます。
<img src="image/ramen.gif" width="150" height="120"border="0" name="RAMEN">はカップ麺の出来上がりを表す画像です。名前を設定して画像を置き換えられるようにしています。
<html>
<head>
<title></title>
<meta charset="UTF-8">
</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>
<head>
<title></title>
<meta charset="UTF-8">
</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>
                             |
プログラムの実行結果が表示されます。