如何通过鼠标悬停制作图案

Question

我有一个模式代码，我想通过悬停来执行它。

我想如果用户悬停图片1 =＆gt; 2 =＆gt; 3 =＆gt; 6 =＆gt;连续9次，浏览器中显示警报并写入您的模式为真。但它没有用。

当我们按照1然后2然后3然后6然后第9张照片时，如何将其更改为显示警告。

＆＃13;

＆＃13;

var code = arman1(2);

function arman1(code) {
  var picture1 = document.getElementById('p1');
  var picture2 = document.getElementById('p2');
  var picture3 = document.getElementById('p3');
  var picture4 = document.getElementById('p4');
  var picture5 = document.getElementById('p5');
  var picture6 = document.getElementById('p6');
  var picture7 = document.getElementById('p7');
  var picture8 = document.getElementById('p8');
  var picture9 = document.getElementById('p9');
  document.getElementById('end1').innerHTML = (code + 1);
}

function arman2() {
  var picture1 = document.getElementById('p1');
  var picture2 = document.getElementById('p2');
  var picture3 = document.getElementById('p3');
  var picture4 = document.getElementById('p4');
  var picture5 = document.getElementById('p5');
  var picture6 = document.getElementById('p6');
  var picture7 = document.getElementById('p7');
  var picture8 = document.getElementById('p8');
  var picture9 = document.getElementById('p9');
  document.getElementById('end2').innerHTML = (1);
}

function arman3() {
  var picture1 = document.getElementById('p1');
  var picture2 = document.getElementById('p2');
  var picture3 = document.getElementById('p3');
  var picture4 = document.getElementById('p4');
  var picture5 = document.getElementById('p5');
  var picture6 = document.getElementById('p6');
  var picture7 = document.getElementById('p7');
  var picture8 = document.getElementById('p8');
  var picture9 = document.getElementById('p9');
  document.getElementById('end3').innerHTML = (1);
}

function arman6() {
  var picture1 = document.getElementById('p1');
  var picture2 = document.getElementById('p2');
  var picture3 = document.getElementById('p3');
  var picture4 = document.getElementById('p4');
  var picture5 = document.getElementById('p5');
  var picture6 = document.getElementById('p6');
  var picture7 = document.getElementById('p7');
  var picture8 = document.getElementById('p8');
  var picture9 = document.getElementById('p9');
  document.getElementById('end6').innerHTML = (1);
}

function arman9() {
  var picture1 = document.getElementById('p1');
  var picture2 = document.getElementById('p2');
  var picture3 = document.getElementById('p3');
  var picture4 = document.getElementById('p4');
  var picture5 = document.getElementById('p5');
  var picture6 = document.getElementById('p6');
  var picture7 = document.getElementById('p7');
  var picture8 = document.getElementById('p8');
  var picture9 = document.getElementById('p9');
  document.getElementById('end9').innerHTML = (1);
}

＆＃13;

</script>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p1" onMouseOver="arman1()">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p2" onMouseOver="arman2()">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p3" onMouseOver="arman3()">
<br>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p4">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p5">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p6" onMouseOver="arman6()">
<br>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p7">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p8">
<img src="http://s9.picofile.com/file/8312582376/pattern.pngg" style="width: 50px; height: 50px;" id="p9" onMouseOver="arman9()">
<p id="end1"></p>
<p id="end2"></p>
<p id="end3"></p>
<p id="end6"></p>
<p id="end9"></p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在鼠标悬停在每个图像上时，将相应的图像索引推送到数组，并在悬停图像9上比较索引是否正确。希望这会对你有所帮助。

＆＃13;

＆＃13;

var code = arman1(2);
var patternArray = [];
function arman1(code) {
    var picture1 = document.getElementById('p1');
    var picture2 = document.getElementById('p2');
    var picture3 = document.getElementById('p3');
    var picture4 = document.getElementById('p4');
    var picture5 = document.getElementById('p5');
    var picture6 = document.getElementById('p6');
    var picture7 = document.getElementById('p7');
    var picture8 = document.getElementById('p8');
    var picture9 = document.getElementById('p9');
    document.getElementById('end1').innerHTML = (code + 1);
    patternArray = [1];
}

function arman2() {
    var picture1 = document.getElementById('p1');
    var picture2 = document.getElementById('p2');
    var picture3 = document.getElementById('p3');
    var picture4 = document.getElementById('p4');
    var picture5 = document.getElementById('p5');
    var picture6 = document.getElementById('p6');
    var picture7 = document.getElementById('p7');
    var picture8 = document.getElementById('p8');
    var picture9 = document.getElementById('p9');
    document.getElementById('end2').innerHTML = (1);
    patternArray.push(2);
}

function arman3() {
    var picture1 = document.getElementById('p1');
    var picture2 = document.getElementById('p2');
    var picture3 = document.getElementById('p3');
    var picture4 = document.getElementById('p4');
    var picture5 = document.getElementById('p5');
    var picture6 = document.getElementById('p6');
    var picture7 = document.getElementById('p7');
    var picture8 = document.getElementById('p8');
    var picture9 = document.getElementById('p9');
    document.getElementById('end3').innerHTML = (1);
    patternArray.push(3);
}

function arman6() {
    var picture1 = document.getElementById('p1');
    var picture2 = document.getElementById('p2');
    var picture3 = document.getElementById('p3');
    var picture4 = document.getElementById('p4');
    var picture5 = document.getElementById('p5');
    var picture6 = document.getElementById('p6');
    var picture7 = document.getElementById('p7');
    var picture8 = document.getElementById('p8');
    var picture9 = document.getElementById('p9');
    document.getElementById('end6').innerHTML = (1);
    patternArray.push(6);
}

function arman9() {
    var picture1 = document.getElementById('p1');
    var picture2 = document.getElementById('p2');
    var picture3 = document.getElementById('p3');
    var picture4 = document.getElementById('p4');
    var picture5 = document.getElementById('p5');
    var picture6 = document.getElementById('p6');
    var picture7 = document.getElementById('p7');
    var picture8 = document.getElementById('p8');
    var picture9 = document.getElementById('p9');
    document.getElementById('end9').innerHTML = (1);
    patternArray.push(9);
    checkPattern();
}

function checkPattern() {
    if(patternArray[0] == 1 && patternArray[1] == 2 && patternArray[2] == 3 && patternArray[3] == 6 && patternArray[4] == 9 && patternArray.length == 5) {
        alert("Your pattern is correct");
    }
}

＆＃13;

<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p1" onMouseOver="arman1()">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p2" onMouseOver="arman2()">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p3" onMouseOver="arman3()">
<br>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p4">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p5">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p6" onMouseOver="arman6()">
<br>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p7">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p8">
<img src="http://s9.picofile.com/file/8312582376/pattern.pngg" style="width: 50px; height: 50px;" id="p9" onMouseOver="arman9()">
<p id="end1"></p>
<p id="end2"></p>
<p id="end3"></p>
<p id="end6"></p>
<p id="end9"></p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用常用函数arman，并将收集的用户模式与已定义的正确模式匹配，如下面的代码段所示。

希望这有帮助。

var correctPattern = '12369';
var userPattern = '';

function arman(code) {
  userPattern += code;

  if (correctPattern === userPattern) {
    alert('Right Pattern :D');
  }
}

</script>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p1" onMouseOver="arman(1)">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p2" onMouseOver="arman(2)">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p3" onMouseOver="arman(3)">
<br>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p4">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p5">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p6" onMouseOver="arman(6)">
<br>
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p7">
<img src="http://s9.picofile.com/file/8312582376/pattern.png" style="width: 50px; height: 50px;" id="p8">
<img src="http://s9.picofile.com/file/8312582376/pattern.pngg" style="width: 50px; height: 50px;" id="p9" onMouseOver="arman(9)">
<p id="end1"></p>
<p id="end2"></p>
<p id="end3"></p>
<p id="end6"></p>
<p id="end9"></p>