4.13 JS04

点呼システム

var btns = document.getElementById('box').getElementsByTagName('button');
var oh1 = document.getElementById('oh1');
var timer = null;
var arr = [' ',' ',' ',' ',' ',' ',' '];
btns[0].onclick = function () {
    clearInterval(timer);
    timer = setInterval(function () {
        var randomNum = parseInt(Math.random() * arr.length);
        oh1.innerHTML = arr[randomNum];
    },10);
};
btns[1].onclick = function () {
    clearInterval(timer);
}

ポイント:var randomNum=parseInt(Math.random(*arr.length);配列の長さを乗じるparseIntで配列の各数を確保する.

均等なアニメーション

var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var timer = null;
    var begin = 0;
    var target = 800;
    var speed = 4;
    btn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            begin += speed;
            if (begin >= target) {
                clearInterval(timer);
                begin = target;
            }
            box.style.left = begin + "px";
        }, 10)
    }

低速アニメーション

    var btn = document.getElementById("btn");
    var box = document.getElementById("box");
    var timer = null;
    var start = 0;
    var end = 800;
    btn.onclick = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            start += Math.ceil((end - start ) / 15);
            console.log(start);
            if(start>=end){
                start = end;
                clearInterval(timer);
            }
            box.style.left = start + "px";
        }, 50)
    }

ポイント:start+=Math.ceil((end - start )/15);このうち15は係数であり,小さいほど速く動く

長図展示

 var pic = document.getElementById("pic");
    var spans = document.getElementsByTagName("span");
    var timer = null;
    var speed = 10;
    var topMargin = 0;
    var target = -400;
    spans[0].onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            topMargin += speed;
            if (topMargin >= 0) {
                clearInterval(timer);
                topMargin = 0;
            }
            pic.style.top = topMargin + "px";
        }, 10)
    }
    spans[1].onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            topMargin -= speed;
            if (topMargin <= target) {
                clearInterval(timer);
                topMargin = target;
            }
            pic.style.top = topMargin + "px";
        }, 10)
    }

シャドウの表示

var box = document.getElementById("box");
    var cover = document.getElementById("cover");
    var timer = null;
    var topSize = 200;
    box.onmouseover = function () {
        clearInterval(timer);
        timer = setInterval(function () {
            topSize -= 4;
            if(topSize<=0){
                clearInterval(timer);
                topSize = 0;
            }
            cover.style.top = topSize + "px";
        },10);
    }

ページジャンプ+再帰関数

    var oh6 = document.getElementById("oh6");
    var count = 5;
    var timer = setTimeout(function () {
        clearTimeout(timer);
        count--;
        if (count < 1) {
            window.location.href = "http://www.baidu.com";
        }
        else {
            oh6.innerHTML = count + " ";
        }
        timer = setTimeout(arguments.callee, 1000);
    }, 1000)

重点:window.location.href = "http://www.baidu.com";:ジャンプ先アドレス.arguments.callee:匿名関数の内部で関数自体を見つけ、自分を呼び出し、再帰と略称し、一次タイマの複数回使用
スレッド:タスクキューを実行するために使用されるタスクキュー:先進的なエクスポート

アドバンスドキャスト

var spans = document.getElementsByTagName("span");
    var pic = document.getElementById("pic");
    var timer = null;
    var beginLeft = 0;
    var loop = 0;
    var speed = 4;
    var flag = false;
    spans[1].onclick = function () {
        if (flag == true) {
            return;
        }
        flag = true;
        clearInterval(timer);
        loop++;
        if (loop > 5) {
            loop = 1;
            beginLeft = 0;
        }
        timer = setInterval(function () {
            beginLeft -= speed;
            if (beginLeft <= -600 * loop) {
                clearInterval(timer);
                beginLeft = -600 * loop;
                flag = false;
            }
            pic.style.left = beginLeft + "px";
        }, 10)
    }
    spans[0].onclick = function () {
        if (flag == true) {
            return;
        }
        flag = true;
        clearInterval(timer);
        loop--;
        if (loop < 1) {
            loop = 4;
            beginLeft = -600 * 5;
        }
        timer = setInterval(function () {
            beginLeft += speed;
            if (beginLeft >= -600 * loop) {
                clearInterval(timer);
                beginLeft = -600 * loop;
                flag = false;
            }
            pic.style.left = beginLeft + "px";
        }, 10)
    }

ポイント:

cursor: pointer;:1つのcss属性で、マウスを置いて小手になるように設定.

returnの応用:1つのタグを設定し、再画像の遷移を規定する時にspanをクリックするのは無効で、1つのfalseをタグして、ifはtrueをタグする時、returnを判断して、後のコードを実行しない.初めてspanをクリックするとfalseの値になり、ifの後にtrueがマークされ、タイマが実行する.再度spanをクリックすると、タグの値はtrue,returnとなり、後のコードは実行されない.タイマは自動的に動作、条件に達し、画像の遷移が完了すると、再びクリックするためにfalseがマークされたfalseに戻る.

認証コードの取得

var btn = document.getElementById("btn");
    var timer = null;
    var num = 5;
    btn.onclick = function () {
        btn.disabled = true;
        timer = setInterval(function () {
            var dom = num--;
            if (dom < 1) {
                btn.disabled = false;
                btn.innerHTML = " ";
                num = 5;
                clearInterval(timer);
            }
            else {
                btn.innerHTML = dom + " ";
            }
        }, 1000)
    }

ポイント:

btn.disabled = false;設定ボタンはクリックできません.これを設定するときは、クリアタイマー

を設定する必要はありません.

タイマの呼び出しオブジェクトはwindowなので、タイマではthisで呼び出しオブジェクトを指すことはできません.使用する場合はバックアップポインタvar that = this;を書き、thatを書きます.innerHTML. スタック領域:ポインタスタック領域:データを格納