Search
  1. テキストボックスに文字を流す〔タイマー(指定秒数後に処理を実行)〕
  2. 文字を動かす(IEのみ)〔タイマー(指定秒数後に処理を実行)〕
  3. 定期的に画像を入れ替え表示〔タイマー(定期的に処理を実行)〕
  4. 画面の自動スクロール〔タイマー(定期的に処理を実行)〕

テキストボックスに文字を流す
タイマー(指定秒数後に処理を実行)

unknown

変数名 = window.setTimeout ( function 実行する処理, float 時間 )
window.clearTimeout ( 変数名 )

タイマーを設定するにはsetTimeoutを使用します。 時間はミリ秒単位(1秒=1000ミリ秒)で指定します。 例えば5秒後に処理を実行したい場合は、5000を指定します。

タイマーを解除するにはclearTimeoutを使用します。

サンプルを見る
<script type="text/javascript">
    var timeID=0;
    var n=0;
    var message=" 人気No1のペットはチワワです";
    var maxlen=message.length;

    /* メッセージを流す */
    function changeMessage() {
        var frm=document.form4;
        if(n==0) frm.messageboard.value="";
        /* 1文字ずつ追加表示 */
        frm.messageboard.value+=message.substr(n,1);
        n++;
        /* maxlen文字数表示したらリセット */
        if(n==maxlen) n=0;
        clearTimeout(timeID);
        /* 流すスピードは500ミリ秒(0.5秒) */
        timeID=setTimeout("changeMessage()", 500);
    }
    /* メッセージを止める */
    function stopMessage(){
        clearTimeout(timeID);
    }
</script>

<form action="#" name="form4">
    MessageBoard:<input type="txet" id="messageboard" size="50">
    <input type="button" name="play" value="play" onclick="changeMessage()">
    <input type="button" name="stop" value="stop" onclick="stopMessage()">
</form>

文字を動かす(IEのみ)
タイマー(指定秒数後に処理を実行)

unknown

変数名 = window.setTimeout ( function 実行する処理, float 時間 )
windoow.clearTimeout ( 変数名 )
IEのみ
サンプルを見る
<style type="text/css">
    .layer {
        left:5px; top:200px;
        position:absolute;
        font-size:13px; font-weight:bold;
        color:purple; background-color:yellow;
    }
</style>

<script type="text/javascript">
    /**
     * レイヤ移動(IEのみ)
    */
    var tx=5; /* レイヤ初期表示位置(x座標) */
    var ty=200; /* レイヤ初期表示位置(y座標) */
    var min=5; /* x座標の最小値 */
    var max=500; /* y座標の最大値 */
    var xdr=1;
    var speed=1; /* 移動量(座標のpx値) */
    var tmr=20; /* タイマー(ミリ秒) */
    var timerID1=0;
    var timerID2=0;
    var xdr=1;

    function draw2(){
        if (document.all){ //IE
            document.all("text1").style.pixelTop=ty; /* 縦方向の座標 */
            if (document.all("text1").style.pixelLeft > min){
                /* x座標の最小値になるまで左へ移動 */
                document.all("text1").style.pixelLeft-=(speed*xdr);
            }
        }
    }
    function draw1(){
        if (document.all){ //IE
            document.all("text1").style.pixelTop=ty; /* 縦方向の座標 */
            if (document.all("text1").style.pixelLeft<max){
                /* x座標の最大値になるまで右へ移動 */
                document.all("text1").style.pixelLeft+=(speed*xdr);
            }
        }
    }
    function main1(){
        document.forms[0].stop2.click();
        draw1();
        /* main1()関数が呼び出される度に、timerIDをクリアする。
        クリアしないと、スピードがどんどん速くなります。
        呼び出した分クリアしないと止まりません。 */
        clearTimeout(timerID1);
        /* tmrの値の間隔でmain()を実行するというスケジュールをセット */
        timerID1=setTimeout("main1()",tmr);
    }
    function main2(){
        document.forms[0].stop1.click();
        draw2();
        clearTimeout(timerID2);
        timerID2=setTimeout("main2()",tmr);
    }
</script>

<div id="text1" class="layer">文字を動かす(IEのみ)</div>
<form action="#" name="form3">
    <input type="button" name="toright" value="← 左へ移動" onclick="main2();" /> 
    <input type="button" name="stop2" value="左移動停止" onclick="clearTimeout(timerID2);" /> 
    <input type="button" name="stop1" value="右移動停止" onclick="clearTimeout(timerID1);" /> 
    <input type="button" name="toleft" value="右へ移動 →" onclick="main1();" />
</form>

定期的に画像を入れ替え表示
タイマー(定期的に処理を実行)

unknown

変数名 = window.setTimeout ( function 実行する処理, float 時間 )
windoow.clearTimeout ( 変数名 )

タイマーを設定するにはsetIntervalを使用します。 時間はミリ秒単位(1秒=1000ミリ秒)で指定します。 例えば5秒後に処理を実行したい場合は、5000を指定します。

タイマーを解除するにはclearIntervalを使用します。

サンプルを見る
<script type="text/javascript">
    var timeID;
    /* ブラウザ判別 */
    var ie=document.all?1:0
    var ns6=document.getElementById&&!document.all?1:0
    var opera=window.opera?1:0

    /* 画像の配列 */
    var gazo=new Array()
    gazo[0]="/content/img/skin/pengin.gif"
    gazo[1]="/content/img/skin/pengin_doki.gif";

    /* 入れ替えのスピード */
    var speed=1000;

    /* カウント変数 */
    var cnt=0;

    /* 画像入れ替え処理 */
    function gazoChange(){
        var obj=ns6 ? document.getElementById('pengin') : document.all('pengin');
        if (cnt<gazo.length){
            obj.src=gazo[cnt];
            cnt++;
        }else{
            cnt=0;
            obj.src=gazo[cnt];
        }
    }
    /* タイマー処理 */
    function init(){
        clearInterval(timeID); /* ボタン連打による加速防止 */
        timeID=setInterval("gazoChange()",speed);
    }
    /* ページの読み込み完了時に実行 */
    if(ie || ns6 || opera){
        window.onload=init;
    }
</script>

<p>
    <img src="/content/img/skin/pengin.gif" id="pengin" name="pengin" width="43" height="58" alt="ペンギン" />
</p>

<form action="#">
    画像入れ替え処理:
    <input type="button" value="再開" onclick="init();" />
    <input type="button" value="停止" onclick="clearInterval(timeID);" />
</form>

画面の自動スクロール
タイマー(定期的に処理を実行)

unknown

変数名 = window.setInterval( function 実行する処理, float 時間 )
window.clearInterval( 変数名 )
サンプルを見る
<script type="text/javascript">
    var timerID;
    function ScrollStart(){
        /* 0.2秒間隔でscroll()関数をコール */
        timerID=setInterval("scroll()",200);
    }
    function scroll(){
        /* 10pxずつ下方向へ画面をスクロール */
        window.scrollBy(0,10);
    }
    function ScrollStop(){
        /* タイマーを解除し、スクロール処理を停止 */
        clearInterval(timerID);
    }
</script>

<form action="#">
    <input type="button" value="画面スクロール開始" onclick="ScrollStart()" /><br>
    <input type="button" value="画面スクロール停止" onclick="ScrollStop()" />
</form>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women