Question

我正在尝试制作“轮盘”脚本，但是我有一些问题。我正在尝试通过这种方式实现：

如果单击“开始”，则要从头到尾逐一突出显示。
经过一定数量的循环（从开始到结束），也将其停止在随机图像上，并用绿色边框（赢家）突出显示并警告data-id。

此刻，每当我单击“开始”时，它就会开始突出显示每个图像，但不会删除先前图像上的边框。我真的不知道该怎么实现。

我的代码：

function start() {
  var el = document.querySelectorAll(".roulette-item");
  play(el, el.length);
};

function play(el, length) {
  var item = 0;
  var interval = setInterval(() => {
    el[item].style.border = "3px solid yellow";
    if (item == length) {
      item = 0;
		} else {
      item++;
    }
  }, 200);
}

<div class="grid-container">
  <img data-id="0" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="1" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="2" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="3" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="4" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="5" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="6" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="7" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
  <img data-id="8" class="grid-cell roulette-item" src="https://picsum.photos/150/150">
</div>

<button onclick="start()">Start</button>

通常，我对此并不陌生，很抱歉我的代码看起来丑陋。

其他问题：

在“轮盘赌”上与PHP一起使用这种类型是否安全？我的意思是，它可以容易地被操纵吗？

Answer 1

正在发生的事情是您在元素中添加了样式，但没有将其从上一个元素中删除。使用您的代码，您可以进行以下调整：

function play(el, length) {
    var item = length - 1;
    var interval = setInterval(() => {
        el[item].style.border = "";
        item = (item + 1) % length;
        el[item].style.border = "3px solid yellow";
    }, 200);
}

如果您不熟悉Web开发，则可以考虑使用CSS来描述边界，如下所示：

.highlighted {
    border: 3px solid yellow;
}

在运行轮盘赌时，应适当添加和删除该类

function play(el, length) {
    var item = length - 1;
    var interval = setInterval(() => {
        el[item].classList.add("border");
        item = (item + 1) % length;
        el[item].classList.remove("border");
    }, 200);
}

轮盘，选择图片

1 个答案: