时间戳

首页 > 解决方案 > HTML/Js/Css - 选择一个随机元素来改变颜色

javascript - HTML/Js/Css - 选择一个随机元素来改变颜色

问题描述

这基本上是（有点）我第一次编码！我正在尝试制作一个 html 游戏以放在网站上。

它有 9 个盒子，都是蓝色的。其中一些盒子是橙色的。每当单击橙色框时，它将变为蓝色！任务是尽快让所有的盒子变成蓝色。

当所有的方框都是蓝色时，您可以单击一个按钮来刷新页面，这将给出一对不同的橙色方框。我有一些部分有效的代码。

我不知道如何让我的代码随机选择一些框，将它们更改为橙色。（我也没有制作刷新页面的按钮）。我不太擅长解释或编码，但这是我到目前为止所拥有的。

function setColor(e) {
  var target = e.target,
    count = +target.dataset.count;

  target.style.backgroundColor = count === 1 ? "#08AED4" : '#D4A108';
  target.dataset.count = count === 1 ? 0 : 1;

}
#box1 {
  position: relative;
  border-top-left-radius: 80px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box2 {
  position: relative;
  bottom: 10px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box3 {
  position: relative;
  bottom: 20px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 80px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box4 {
  position: relative;
  left: 215px;
  bottom: 678px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box5 {
  position: relative;
  left: 215px;
  bottom: 688px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box6 {
  position: relative;
  left: 215px;
  bottom: 698px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box7 {
  position: relative;
  left: 430px;
  bottom: 1355px;
  border-top-left-radius: 25px;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box8 {
  position: relative;
  left: 430px;
  bottom: 1366px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box9 {
  position: relative;
  left: 430px;
  bottom: 1377px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 80px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}
<p type="button" id="box1" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box2" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box3" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box4" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box5" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box6" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box7" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box8" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box9" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>

标签： javascripthtmlcsscolorsbox

解决方案

您可以使用此功能（用于一个盒子）并在循环中重复它以获得更多橙色盒子

function selectBoxes() {

        var box1 = document.getElementById('box1'); //storing boxen in variables
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var box4 = document.getElementById('box4');
        var box5 = document.getElementById('box5');
        var box6 = document.getElementById('box6');
        var box7 = document.getElementById('box7');
        var box8 = document.getElementById('box8'); 
        var box9 = document.getElementById('box9');
        
        var boxes = [];
        boxes.push(box1, box2, box3, box4, box5, box6, box7, box8, box9); //putting boxes in an array
        console.log(boxes);
        
        
        var boxToChangeNum = Math.floor(Math.random() * 9); //random number from 0 to 8
        boxes[boxToChangeNum].style.backgroundColor = "#D4A108"; //changing style of the selected box

    }

推荐阅读