HTML TIPS & TRICKS
BACK NUMBER 1998

0998.09

No.1 マウスに反応してメッセージを表示
No.2 リンク先にランダムにジャンプ
No.3 大文字小文字を入れかえる
No.4 時間によってデザインを変える

Puzzle No.1 右上に囲みを表示させろ!
Puzzle No.2 囲みに背景画像を指定しろ!


JavaScript部分


var m = 2;                          //変化するフォントサイズの変化量
var n1 = 16;                        //フォントの初期サイズ
var length = "pt";                  //フォントサイズの単位
var n2 = n1 + length;               //初期フォントサイズ(サイズ表示用)
//フォントのサイズに上限と下限を設定する事が問題で指示されていたため次の変数を用意
var maxSize = 26;                   //最大サイズ
var minSize = 6;                    //最小サイズ

function showSize()                 //デフォルトサイズにする関数 読みこまれたときに実行される
{
    dFrame.style.fontSize = n2;     //サイズを変更
    //サイズを表示 必要はありませんでしたがあったほうがわかりやすいと思い追加しました
    size.innerText = "現在のフォントサイズ:" + n2;
}

function sizeChenge(cSize)          //サイズ変更関数 引数付きでボタンのonClickイベントから実行される
{
    if(cSize == "smaller")          //小さくするとき
    {
        if(n1 <= minSize)           //サイズが最小サイズ以下のとき
        {
            //メッセージを表示
            alert("サイズは" + minSize + length + "以上、" + maxSize + length + "以下に制限してあります。");
        }
        else                        //それ以外
        {
            n1 -= m;                //縮小
        }
    }
    else if(cSize == "bigger")      //大きくするとき
    {
        if(n1 >= maxSize)           //サイズが最大サイズ以上のとき
        {
            //メッセージを表示
            alert("サイズは" + minSize + length + "以上、" + maxSize + length + "以下に制限してあります。");
        }
        else
        {
            n1 += m;                //拡大
        }
    }
    var n2 = n1 + length;           //単位をポイントにする
    //サイズを表示
    size.innerText = "現在のフォントサイズ:" + n2;
    dFrame.style.fontSize = n2;     //サイズを変更
}

本体部分

<DIV id="dFrame" class="frame">  <!-- 表示枠 この中のフォントのサイズを変更する IDはdFrame -->
<P style="font-weight:bold">0998.09</P>
<P>
    <SPAN style="color:blue">No.1 マウスに反応してメッセージを表示</SPAN><BR>
    <SPAN style="color:red">No.2 リンク先にランダムにジャンプ</SPAN><BR>
    <SPAN style="color:green">No.3 大文字小文字を入れかえる</SPAN><BR>
    <SPAN style="color:purple">No.4 時間によってデザインを変える</SPAN>
</P>
<P>
    Puzzle No.1 右上に囲みを表示させろ!<BR>
    Puzzle No.2 囲みに背景画像を指定しろ!
</P>
</DIV>
<SCRIPT type="text/javascript">  <!-- フォントの状態を表示する部分 -->
<!--
    document.write("デフォルトサイズ:" + n1 + length + "<BR>");
    document.write(minSize + length +" <= サイズ範囲 <= " + maxSize + length + "<BR>");
    document.write("<SPAN id=\"size\"></SPAN>");
//-->
</SCRIPT>

<DIV style="text-align:center">
    <!-- フォントサイズを変更するボタン -->
    <INPUT type="button" name="ボタン" value="フォントを小さく" onClick="sizeChenge('smaller')">
    <INPUT type="button" name="submit" value="フォントを大きく" onClick="sizeChenge('bigger')">
</DIV>


トップページ