文章/答案/技术大牛

发布

社区首页 >问答首页 >HTML骰子问题(无法按要求应用css )

问HTML骰子问题(无法按要求应用css )
EN

Stack Overflow用户

提问于 2022-09-15 19:27:26

回答 1查看 69关注 0票数 -2

我试图在刷新代码运行良好后第一次运行此代码，但在1次单击它不按要求应用CSS之后。

这是问题陈述

掷骰子问题陈述:掷骰子，你和你的另外两个团队成员正在做你的构建周项目。一个问题出现在你的项目中，你们三个都想出了一个解决方案。这三种解决方案都是可行的，你们每个人都想实现自己的解决方案。因此，你们所有人都决定掷骰子，无论谁得到最大的分数，都将实现他的解决方案。但问题是你不能在网上掷骰子，所以你作为一个活跃的团队成员，决定制作一个应用程序，其中三个骰子显示1到6之间的随机数，如下所述。

描述:-创建一个Index.html文件创建三个“DIV”，它将代表三个骰子，并显示一个介于1到6之间的随机数。第一个代表成员A的分数，第二个代表成员B的分数，第三个代表成员C的分数，在按下该按钮时制作一个包含文本内容“滚动骰子”的按钮，三个骰子应该滚动并显示一个在1到6之间的随机数。在顶部设置一个“DIV”，它将显示获胜者的事情如下:-第一个骰子将有id“成员-1”。第二个骰子将有身份证“成员-2”。第三个骰子将有身份证“成员-3”。滚动骰子按钮将有id“滚动”。显示div的获胜者将有id“赢家”，获胜的骰子将是绿色的。第二个得分手骰子是黄色的，得分最少的骰子应该是红色的。在抽签的情况下，将得分相等的骰子显示为蓝色。

document.getElementById("roll").addEventListener("click", rollTheDice)

function rollTheDice() {
  var score1 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score1").innerText = score1;
  var score2 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score2").innerText = score2;
  var score3 = Math.floor((Math.random() * 6) + 1);
  document.getElementById("score3").innerText = score3;
  if (score1 === score2 && score2 == score3) {
    document.getElementById("winnerteam").innerText = "Draw";
    document.getElementById("member-1").setAttribute("id", "blue");
    document.getElementById("member-2").setAttribute("id", "blue");
    document.getElementById("member-3").setAttribute("id", "blue");
  } else if (score1 === score2 || score1 === score3 || score2 === score3) {
    if (score1 === score2) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-1").setAttribute("id", "blue");
      document.getElementById("member-2").setAttribute("id", "blue");
      if (score3 > score1) {
        document.getElementById("member-3").setAttribute("id", "green");
      } else {
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else if (score1 === score3) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-1").setAttribute("id", "blue");
      document.getElementById("member-3").setAttribute("id", "blue");
      if (score2 > score1) {
        document.getElementById("member-2").setAttribute("id", "green");
      } else {
        document.getElementById("member-2").setAttribute("id", "yellow");
      }
    } else if (score2 === score3) {
      document.getElementById("winnerteam").innerText = "Draw";
      document.getElementById("member-2").setAttribute("id", "blue");
      document.getElementById("member-3").setAttribute("id", "blue");
      if (score1 > score2) {
        document.getElementById("member-1").setAttribute("id", "green");
      } else {
        document.getElementById("member-1").setAttribute("id", "yellow");
      }
    }

  } else {
    if (score1 > score2 && score1 > score3) {
      document.getElementById("winnerteam").innerText = 1;
      document.getElementById("member-1").setAttribute("id", "green");
      if (score2 > score3) {
        document.getElementById("member-2").setAttribute("id", "yellow");
        document.getElementById("member-3").setAttribute("id", "red");
      } else {
        document.getElementById("member-2").setAttribute("id", "red");
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else if (score2 > score1 && score2 > score3) {
      document.getElementById("winnerteam").innerText = 2;
      document.getElementById("member-2").setAttribute("id", "green");
      if (score1 > score3) {
        document.getElementById("member-1").setAttribute("id", "yellow");
        document.getElementById("member-3").setAttribute("id", "red");
      } else {
        document.getElementById("member-1").setAttribute("id", "red");
        document.getElementById("member-3").setAttribute("id", "yellow");
      }
    } else {
      document.getElementById("winnerteam").innerText = 3;
      document.getElementById("member-3").setAttribute("id", "green");
      if (score1 > score2) {
        document.getElementById("member-1").setAttribute("id", "yellow");
        document.getElementById("member-2").setAttribute("id", "red");
      } else {
        document.getElementById("member-1").setAttribute("id", "red");
        document.getElementById("member-2").setAttribute("id", "yellow");
      }
    }
  }
  Set.clear();
}

#member-1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#member-2 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#member-3 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
}

#roll {
  margin-left: -35px;
  margin-top: 25px;
  text-align: center;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  background-color: gray;
  border: none;
  color: white;
  font-size: 25px;
}

#roll:hover {
  background-color: rgb(53, 52, 52);
  color: black;
  cursor: pointer;
  border: 1px solid black;
}

#parent {
  margin-left: 45%;
}

#winner {
  margin-left: -95px;
}

#green {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: green;
}

#red {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: red;
}

#yellow {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: yellow;
}

#blue {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  background-color: blue
}

<div id="parent">
  <div id="winner">
    <h1>The Winner is team:-<span id="winnerteam"></span></h1>
  </div>
  <div id="member-1">
    <h1 id="score1"></h1>
  </div>
  <div id="member-2">
    <h1 id="score2"></h1>
  </div>

  <div id="member-3">

    <h1 id="score3"></h1>
  </div>
  <button id="roll">ROLL THE DICE</button>
  <!-- <a href="./index.html"></a> -->
</div>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-09-15 20:02:55

删除CSS.because中的所有颜色属性--即使使用set setAttribute("class", "red")而不是id --当表示最新规则的数字change.because CSS Equal Specificity获胜时，仍然需要删除这些类--如果同一条规则被写入外部样式表两次，那么最新的规则将获胜。

因此，我没有上课，而是在JS中用.style.backgroundColor = "red";等对.style.backgroundColor = "red";进行了样式化。

document.getElementById("roll").addEventListener("click", rollTheDice)

    function rollTheDice() {
        var score1 = Math.floor((Math.random() * 6) + 1);
        document.getElementById("score1").innerText = score1;
        var score2 = Math.floor((Math.random() * 6) + 1);
        document.getElementById("score2").innerText = score2;
        var score3 = Math.floor((Math.random() * 6) + 1);
        document.getElementById("score3").innerText = score3;
        if (score1 === score2 && score2 == score3) {
            document.getElementById("winnerteam").innerText = "Draw";
            document.getElementById("member-1").style.backgroundColor = "blue";
            document.getElementById("member-2").style.backgroundColor = "blue";
            document.getElementById("member-3").style.backgroundColor = "blue";
        } else if (score1 === score2 || score1 === score3 || score2 === score3) {
            if (score1 === score2) {
                document.getElementById("winnerteam").innerText = "Draw";
                document.getElementById("member-1").style.backgroundColor = "blue";
                document.getElementById("member-2").style.backgroundColor = "blue";
                if (score3 > score1) {
                    document.getElementById("member-3").style.backgroundColor = "green";
                } else {
                    document.getElementById("member-3").style.backgroundColor = "yellow";
                }
            } else if (score1 === score3) {
                document.getElementById("winnerteam").innerText = "Draw";
                document.getElementById("member-1").style.backgroundColor = "blue";
                document.getElementById("member-3").style.backgroundColor = "blue";
                if (score2 > score1) {
                    document.getElementById("member-2").style.backgroundColor = "green";
                } else {
                    document.getElementById("member-2").style.backgroundColor = "green";
                }
            } else if (score2 === score3) {
                document.getElementById("winnerteam").innerText = "Draw";
                document.getElementById("member-2").style.backgroundColor = "blue";
                document.getElementById("member-3").style.backgroundColor = "blue";
                if (score1 > score2) {
                    document.getElementById("member-1").style.backgroundColor = "green";
                } else {
                    document.getElementById("member-1").style.backgroundColor = "yellow";
                }
            }

        } else {
            if (score1 > score2 && score1 > score3) {
                document.getElementById("winnerteam").innerText = 1;
                document.getElementById("member-1").style.backgroundColor = "green";
                if (score2 > score3) {
                    document.getElementById("member-2").style.backgroundColor = "yellow";
                    document.getElementById("member-3").style.backgroundColor = "red";
                } else {
                    document.getElementById("member-2").style.backgroundColor = "red";
                    document.getElementById("member-3").style.backgroundColor = "yellow";
                }
            } else if (score2 > score1 && score2 > score3) {
                document.getElementById("winnerteam").innerText = 2;
                document.getElementById("member-2").style.backgroundColor = "green";
                if (score1 > score3) {
                    document.getElementById("member-1").style.backgroundColor = "yellow";
                    document.getElementById("member-3").style.backgroundColor = "red";
                } else {
                    document.getElementById("member-1").style.backgroundColor = "red";
                    document.getElementById("member-3").style.backgroundColor = "yellow";
                }
            } else {
                document.getElementById("winnerteam").innerText = 3;
                document.getElementById("member-3").style.backgroundColor = "green";
                if (score1 > score2) {
                    document.getElementById("member-1").style.backgroundColor = "yellow";
                    document.getElementById("member-2").style.backgroundColor = "red";
                } else {
                    document.getElementById("member-1").style.backgroundColor = "red";
                    document.getElementById("member-2").style.backgroundColor = "yellow";
                }
            }
        }
    }

#member-1 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 10px;
        text-align: center;
    }

    #member-2 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 10px;
        text-align: center;
    }

    #member-3 {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        margin: 10px;
        text-align: center;
    }

    #roll {
        margin-left: -35px;
        margin-top: 25px;
        text-align: center;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        background-color: gray;
        border: none;
        color: white;
        font-size: 25px;
    }

    #roll:hover {
        background-color: rgb(53, 52, 52);
        color: black;
        cursor: pointer;
        border: 1px solid black;
    }

    #parent {
        margin-left: 45%;
    }

    .winner {
        margin-left: -95px;
    }

<div id="parent">
  <div id="winner">
    <h1>The Winner is team:<span id="winnerteam"></span></h1>
  </div>
  <div id="member-1">
    <h1 id="score1"></h1>
  </div>
  <div id="member-2">
    <h1 id="score2"></h1>
  </div>

  <div id="member-3">

    <h1 id="score3"></h1>
  </div>
  <button id="roll">ROLL THE DICE</button>
  <!-- <a href="./index.html"></a> -->
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73736436

复制

相似问题

问HTML骰子问题(无法按要求应用css )
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML骰子问题(无法按要求应用css )EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML骰子问题(无法按要求应用css )
EN