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);
}

counter部分只有number=number-8的变化；并且数字>=40；问题是我有多个框应该在鼠标悬停时点亮颜色变化并在鼠标悬停时点亮。当我在我的盒子上缓慢移动（大号）时，一切都很好，但是当我快速移动时，有些盒子不会亮起来......如果我很快通过的话，似乎不会发生 onmouseout。有什么帮助吗？

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

在您的代码中：

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

标识符号尚未声明或初始化，因此您收到参考错误并且脚本失败。在上述行之前，您可能应该添加：

    var number = 0;

或给number一些其他值。

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

但是在这里您需要访问全局number，因此您可以在闭包中保留引用或将number设为全局。如果您要这样做，请给它一个更好的名称，例如 *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 回答
0

我已经解决了cleartimeout的问题。我创建了两个数组来根据它们的 ID 保存每个框的当前 mouseover 和 mouseout setTimeout id。每次调用 mouseout 时，它首先从数组中清除其对应的 mouseover，对于 mouseout 也是如此。

于 2012-09-10T14:49:07.590 回答