0

私はマウスオーバーで起動することになっているこのコードを持っており、onmouseoutで反対のことをするのに対応しています：

colinc();

function colinc(){

    var hexnum=number.toString(16);
    var hexcolor="#"+hexnum+hexnum+hexnum;
    document.getElementById("c"+x).style.backgroundColor=hexcolor;
    number=number+8;
    if(number<=184)
        setTimeout(colinc,50);
}

カウンターパートには、number=number-8の変更のみがあります。および番号>=40; 問題は、マウスオーバーで色が変化すると点灯し、マウスアウトでライトダウンする複数のボックスがあることです。ボックスの上をゆっくりと移動すると（大きい場合はありません）、すべて問題ありませんが、すばやく移動すると、一部のボックスが消灯しません...非常に速く通過すると、オンマウスアウトが発生しないようです。何か助けはありますか？

function flash(x){
number=0;
var cc = document.getElementById("c"+x);
var cs=document.defaultView.getComputedStyle(cc,null);
var bg=cs.getPropertyValue('background-color');
var str=""+bg;
var n=str.replace("rgb","");
    n=n.replace("(","");
    n=n.replace(")","");
var arr=n.split(",");
number=parseInt(arr[0]);

colinc();

function colinc(){

    var hexnum=number.toString(16);
    var hexcolor="#"+hexnum+hexnum+hexnum;
    document.getElementById("c"+x).style.backgroundColor=hexcolor;
    number=number+8;
    if(number<=184)
        setTimeout(colinc,50);
}
}

function flashe(x){
number=0;
var cc = document.getElementById("c"+x);
var cs=document.defaultView.getComputedStyle(cc,null);
var bg=cs.getPropertyValue('background-color');
var str=""+bg;
var n=str.replace("rgb","");
    n=n.replace("(","");
    n=n.replace(")","");
var arr=n.split(",");
number=parseInt(arr[0]);

colinc();

function colinc(){

    var hexnum=number.toString(16);
    var hexcolor="#"+hexnum+hexnum+hexnum;
    document.getElementById("c"+x).style.backgroundColor=hexcolor;
    number=number-8;
    if(number>=40)
        setTimeout(colinc,40);
}

}

これは私の完全なjsコードです

4

3 に答える 3

1

コンソールにログを記録して、イベントが適切に発生するかどうかを確認します。

function MouseOverHandler(event) {
    console.log('mouseover');
}

function MouseOutHandler(event) {
    console.log('mouseout');
}

また、反対のイベントが発生したときに、どちらかのハンドラーの実行を停止することはありますか。これは、タイムアウトIDを取得してキャンセルすることで実行されます。

var mouseOverTimeout, mouseOutTimeout;

function colinc(){
    clearTimeout(mouseOutTimeout);
    mouseOverTimeout = setTimeout(colinc,50);
}

function MouseOutHandler(event) {
    clearTimeout(mouseOverTimeout);
    mouseOutTimeout = setTimeout(MouseOutHandler,50);
}
于 2012-09-10T12:56:22.273 に答える
0

cleartimeoutの問題を解決しました。IDに従って、すべてのボックスの現在のマウスオーバーとマウスアウトのsetTimeoutIDを保持する2つの配列を作成しました。mouseoutが呼び出されるたびに、最初に対応するマウスオーバーが配列からクリアされ、mouseoutも同様にクリアされます。

于 2012-09-10T14:49:07.590 に答える
0

あなたのコードでは：

> function colinc(){
> 
>     var hexnum=number.toString(16);

識別子番号が宣言または初期化されていないため、参照エラーが発生し、スクリプトが失敗します。上記の行の前に、おそらく次を追加する必要があります。

    var number = 0;

または、数値に他の値を指定します。

>     var hexcolor="#"+hexnum+hexnum+hexnum;
>     document.getElementById("c"+x).style.backgroundColor=hexcolor;
>     number=number+8;
>     if(number<=184)
>         setTimeout(colinc,50);

ただし、ここではグローバル番号にアクセスする必要があるため、クロージャーで参照を保持したり、番号をグローバルにすることができます。これを行う場合は、* colnic_counter *など、他のグローバルと衝突する可能性が低い名前を付けてください。

> }

何かのようなもの：

var colinc = (function() {
    var num = 0;
    return function() {
        var hexnum = num.toString(16);
        var hexcolor = "#" + hexnum + hexnum + hexnum;
//        document.getElementById("c"+x).style.backgroundColor=hexcolor;
         console.log(hexcolor);
        num += 8;

        if (num <= 184)
            setTimeout(colinc,50);
    }
}());

colinc();

関数式は関数の初期化に使用されるため、後で呼び出す必要があることに注意してください。

于 2012-09-10T12:58:48.597 に答える