【補足】20秒間隔でメッセージのスタイルを変更する方法
◆方法1 3種類の見出しタグを使う
<style>
h3 { font-size:120% ; line-height:200% ; color : white }
h4 { font-size:120% ; line-height:200% ; color : navy }
h5 { font-size:120% ; line-height:200% ; color : maroon }
</style>
if ( byo>=0 && byo<=19 )
document.write("<h3>こんにちは</h3>");
if ( byo>=20 && byo<=39 )
document.write("<h4>おはようございます</h4>");
if ( byo>=40 && byo<=59 )
document.write("<h5>お元気ですか</h5>");
上記の方法でも可能であるが、3種類の見出しタグを使うため、改行幅が微妙に上下にずれてしまう。
↓↓↓改善案↓↓↓
◆方法2 同一の見出しタグを使い、クラスを3種類用意する
<style>
.iro1 { font-size:120% ; line-height:200% ; color : white }
.iro2 { font-size:120% ; line-height:200% ; color : navy }
.iro3 { font-size:120% ; line-height:200% ; color : maroon }
</style>
if ( byo>=0 && byo<=19 )
document.write("<h3 class='iro1'>こんにちは</h3>");
if ( byo>=20 && byo<=39 )
document.write("<h3 class='iro2'>おはようございます</h3>");
if ( byo>=40 && byo<=59 )
document.write("<h3 class='iro3'>お元気ですか</h3>");
方法2では、見出しタグが同一なので改行幅が固定され、文字の色だけが変化する。