鼠标移动给定数字后的触发事件答案

【问题标题】：Fire event after mouse has moved given number鼠标移动给定数字后的触发事件
【发布时间】：2012-10-25 16:29:43
【问题描述】：

我尝试根据鼠标坐标更改欢迎消息。它必须在给定数字后更改。

哪里有问题，但我想不通！

var str = ["Hello", "Bonjour", "Salut"],
    len = str.length,
    i = 0;
document.onmousemove = function(event) {
    var count = i++,
        random = (count) % len;
    if (count > 60) {
        document.body.innerHTML = str[random];
        i = 0;
    }
    console.log(count);
};

fiddle 以获得更好的解释。

有什么想法吗？

【问题讨论】：

标签： javascript events count pixel mousemove

【解决方案1】：

您的逻辑只会生成以下计算：

61 % len

或者至少它只会在i > 60 时输出，因此您的输出将始终基于该计算 - 而不是您所期望的。

var str = ["Hello", "Bonjour", "Salut"],
    last = '',
    len = str.length,
    i = 0;
document.onmousemove = function(event, r) {
    if (i++ > 60) {
        r = Math.floor(Math.random() * len;
        if ( last ) { str.push(last); }
        last = str.splice(r,1);
        i = 0;
        document.body.innerHTML = last;
    }
};

不重用之前值的版本：

var str = ["Hello", "Bonjour", "Salut"],
    last = '',
    i = 0;
document.onmousemove = function(event, r) {
    if (i++ > 60) {
        r = Math.floor(Math.random() * str.length);
        if ( last ) { str.push(last); }
        last = str.splice(r,1);
        document.body.innerHTML = last;
        i = 0;
    }
};

【讨论】：

不错！但是，Math.round 的方法不会在 60 之后完全更改文本...
@yckart 是的，它会，但它可能会将其更改为以前的相同值 - 这会使更改不明显。
啊，该死的我没注意到！不好意思，谢谢你:)
@yckart 没问题 :) 我建议您稍微更改一下代码——您正在实现的内容在某些浏览器中不起作用，因为它们不支持 document.body。另外，您实际上不应该使用像上面这样的全局变量（尽管您可能有一个未包含在问题中的范围包装器）；）
@pebble 别担心！一个匿名函数，jquery 就可以了 ;)

【解决方案2】：

我可以看到逻辑上的问题...您仅在值高于 60 并且您再次重置为 0 时才更改内部 html，这意味着如果条件值仅为 61 则它进入...并看看你好吗计算你的随机 val .... 因为它在值为 61 时进入 if 条件，因此当它进入 if 条件并更改内部文本时，你的随机值将始终为 1

【讨论】：

是的，就是这样。文本应在每 61 次触发 mousemove 事件时更改。不是错误，是功能。
我知道你已经得到了答案，但是在第 61 次触发你的随机值是 1 并且总是从数组中选择相同的值......现在这就是我正在谈论的错误

【解决方案3】：

var str = ["Hello", "Bonjour", "Salut"],
    len = str.length,
    i = 0;
document.onmousemove = function(event) {
    var count = i++,
        random;
    do {
        random = Math.floor((Math.random() * 3));
    } while (random == str.indexOf(document.body.innerHTML));
    if (count > 60) {
        document.body.innerHTML = str[random];
        i = 0;
    }
    console.log(count);
};

你对字符串长度使用了某种奇怪的整除性计算，只生成一个介于 0 和 2 之间的随机数，省得你头疼。

编辑：忘记fiddle

【讨论】：

@yckart 实际上会在 60 岁后发生变化，您可能是在暗示它可以更改为相同的值。
@Asad...呵呵，我的想法完全正确。
@yckart 我已更改代码以反映您的要求。它确保更改为不同的值。
@Asad 是的，'已经看到了......现在有点腹胀，但好吧，我必须接受;）
@yckart 使用 do-while 减少了膨胀。

【解决方案4】：

//Use this code...

var str = ["Hello", "Bonjour", "Salut"], len = str.length, i = 0;
document.onmousemove = function (event) {
    var count = i++;
    if (count > 60) {
        var random = (event.screenX + event.screenY) % len;
        document.body.innerHTML = str[random];
        i = 0;
    }
};

【讨论】：

随机想法...但这意味着每次您重新访问相同的像素时都会显示相同的文本，不仅如此，如果用户在水平线或垂直线上移动鼠标，您会得到相同的单词模式——显然考虑到这个问题是一个相当随机的请求，这可能是可取的:)