Как сделать выкройку при наведении мышкой

1

У меня есть код шаблона, который я хочу выполнить, просто зависая, например.

Я хочу, чтобы пользователь зависал изображение 1 => 2 => 3 => 6 => 9 в строке, в браузере отображается предупреждение, и запись вашего паттерна была правдой. Но это не работает.

Как я могу изменить его на это, покажите предупреждение, когда мы будем следовать этому 1, затем 2, затем 3, затем 6, затем 9-ю фотографию.

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);
}
</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>
  • 0
    Начните с правильной инициализации code - вы также можете объединить код в строку или «12369» и протестировать его
Теги:

2 ответа

0
Лучший ответ

Вы можете использовать обычный 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>
Поделиться
0

При наведении на каждое изображение нажимайте соответствующий индекс изображения на массив, а при зависании изображения 9 сравнивайте, являются ли индексы правильными. Надеюсь, что это поможет вам.

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");
    }
}
<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>
Поделиться
  • 0
    этим, если мы наведем последний, он показывает, что шаблон является истинным
  • 0
    @ Arman Не только на последнем. Он должен идти в порядке 1 2 3 6 9, тогда только он будет предупрежден.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню