HOME  >>>  HTML整理ノート  >>> DHTML --  基本編  応用編

文字列の点滅

Dynamic HTML




"1色で点滅"の色は、ボタンをクリックした時に赤青どちらが表示されているかによって決まります。

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var flg = 0;    //2つの動作を切替えるためのフラグ変数
var timer1 = null;
var timer2 = null;
function Blink(){    //ボタンを押した時
    if(flg == 0){
        if(timer1 != null)clearTimeout(timer1);
        Blink2();
        flg = 1;
        bt.innerText = "1色で点滅";
    }else{
        if(timer2 != null)clearTimeout(timer2);
        Blink1();
        flg = 0;
        bt.innerText = "赤青2色で点滅";
    }
}

function Blink1(){         //1色で点滅
    if(p1.style.visibility=="visible")
        p1.style.visibility="hidden";
    else p1.style.visibility="visible";

    timer1 = setTimeout("Blink1()",600);
}
function Blink2(){         //赤青2色で点滅
    if(p1.style.visibility=="visible"){
        p1.style.visibility="hidden";
        //文字色を赤なら青、青なら赤に切り替える
        p1.style.color = (p1.style.color == "red")
                 ? "blue" : "red";

    }else p1.style.visibility="visible";

    timer2 = setTimeout("Blink2()",600);
}
//--></script>
</head>

<body onload="Blink1()">
<p id="p1" style="color:red;font:24pt 'Arial Black';
    visibility:visible;">Dynamic HTML</p>

<button id="bt" style="color:navy;font:12pt 'MS 明朝'"
    onclick="Blink()">赤青2色で点滅</button>


end(最終更新:12/11/21)