2008年11月25日

文字 点滅

スポンサード リンク

点滅する間隔や文字色を変えることもできます。

サンプルソース

<html>
<head>
<title>文字列を点滅します</title>
<style type="text/css">
<!--
#BOX{
font-size : 24px;
font-weight : bold;
color : #008000;
}
-->
</style>

<script language="JavaScript">
<!--
msg = new Array();
msg[0] = "JavaScript スタイルシートサンプル集"; //点滅させる文字列
msg[1] = " "; //空白の文字列
flag=true;
timer=1500; //メッセージの変わる速度(単位は千分の一秒)
window.onload=tenmetu; //ページを読み込んだ時 tenmetu を実行

function tenmetu() {
if(flag){i=0;}
else{i=1;}
document.getElementById("BOX").innerHTML = msg[i];

flag = !flag; //true と false の切り替え
setTimeout("tenmetu()", timer); //指定された時間後(ミリ秒)に関数を実行します
}
// -->
</script>
</head>
<body>
<div id="BOX">JavaScript スタイルシートサンプル集</div>
</body>
</html>

トグルスイッチで 0 と 1を切り替え、配列msg[0] 、msg[1] に格納されている
文字列を交互に表示します msg[1] は空白の文字列なので点滅してるように
見せることができます。

 表示する文字の色を変えるにはcolor : #008000;
 カラーコード#008000 を変更してください。

点滅する間隔を変えるには timer=1500; の数値を変更してください。

カラーコード 色見本
トグルスイッチ(0と1、trueとfalseを切り替え)条件分岐

posted by javaScript at 19:50 | 大阪 ☀ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする