javascript - 如何在 javascript 中随机点击成对图像？-6ren

javascript - 如何在 javascript 中随机点击成对图像？

转载作者：行者123 更新时间：2023-11-29 14:40:33

/* egg & broke egg  pair1  lite & broke lite pair2 pot & frys pair3 */

我想知道如何使图像配对或组合。因此，当您单击鸡蛋图像时，它会消失并出现破损的鸡蛋。然后这个图像也应该消失然后另外两个团队中的一个随机出现 lite 点击 lite break lite 随机出现和消失然后点击 pot 它变成 frys 然后 frys 消失并变成随机团队。

  </head>

  <body onLoad="setRandomImage()"> 

  <img id="egg.png" src= "http//"onClick="setRandomImage();"/>
  <img id="brokeEgg.png" src= "https://" style="display:none"/>

<img id="lite.png" src= "http://" style="display:none"/>
<img id="brokeLite.png" src= "http://" style="display:none"/>

<img id="pot.jpg" src= "https://style="display:none"/>
<img id="frys.jpg" src= "http://style="display:none"/>


<script type="text/javascript">  



    var myShapes=     ["egg.png","brokeEgg.png","lite.png","brokeLite.png","pot.jpg","frys.jpg"    ];



    function setRandomImage() {

    var imgElem = document.getElementById("egg.png")

    imgElem.setAttribute('src',myShapes[Math.floor(Math.random()*6)]);


    };

    </script>

最佳答案

这是一个使用 HTML 的非常简化的 data-*属性，但要考虑:

data-image-seq 属性的值必须是img 后跟一个数字。
这些数字必须排序

已更新

jsFiddle

var imgs = document.querySelectorAll('.imgs-wrapper img'),
  currentIMG = 1;

// attach click events on odd images only, egg, lite, pot, hi1, hello1
for (var i = 0; i < imgs.length; i += 2) {
  addEvent(imgs[i], 'click');
}

function addEvent(element, event) {
  element.addEventListener(event, function() {
    var imgSeq = element.getAttribute('data-image-seq'),
      nextImgSeq, nextImg, shownIMG;

    imgSeq = parseInt(imgSeq.replace('img', ''), 10);
    nextImgSeq = (imgSeq < imgs.length) ? (imgSeq + 1) : 1;
    nextImg = 'img[data-image-seq=img' + nextImgSeq + ']';
    element.style.display = 'none';
    shownIMG = document.querySelector(nextImg);
    shownIMG.style.display = 'block';
    setTimeout(function() {
      shownIMG.style.display = 'none';
      showRandomImg();
    }, 1000);
  });
}

function showRandomImg() {
  var randomIMG = returnRandomOddNum();
  randomIMG = (randomIMG !== currentIMG) ? randomIMG : returnRandomOddNum();
  currentIMG = randomIMG;
  randomIMG = 'img[data-image-seq=img' + randomIMG + ']';
  document.querySelector(randomIMG).style.display = 'block';
}

function returnRandomOddNum() {
  var randomNum = Math.floor(Math.random() * imgs.length);
  randomNum = (randomNum % 2 != 0) ?  randomNum : randomNum + 1;
  return randomNum;
}

.imgs-wrapper { position: relative; }
.imgs-wrapper { cursor: pointer; }
.hide-me { display: none; }

<div class="imgs-wrapper">
  <img data-image-seq="img1" src="//dummyimage.com/150x50?text=egg">
  <img data-image-seq="img2" src="//dummyimage.com/150x50?text=broke egg" class="hide-me">
  <img data-image-seq="img3" src="//dummyimage.com/150x50?text=lite" class="hide-me">
  <img data-image-seq="img4" src="//dummyimage.com/150x50?text=broke light" class="hide-me">
  <img data-image-seq="img5" src="//dummyimage.com/150x50?text=pot" class="hide-me">
  <img data-image-seq="img6" src="//dummyimage.com/150x50?text=frys" class="hide-me">
  <img data-image-seq="img7" src="//dummyimage.com/150x50?text=Hi1" class="hide-me">
  <img data-image-seq="img8" src="//dummyimage.com/150x50?text=Hi2" class="hide-me">
  <img data-image-seq="img9" src="//dummyimage.com/150x50?text=Hello1" class="hide-me">
  <img data-image-seq="img10" src="//dummyimage.com/150x50?text=Hello2" class="hide-me">
</div>

关于javascript - 如何在 javascript 中随机点击成对图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38824917/

文章推荐： javascript - AngularJS: Uncaught Error :[$rootScope:infdig]

文章推荐： jquery - 将 jquery 自动完成的源设置为 mysql 表

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 javascript 中随机点击成对图像？