时间戳

首页 > 解决方案 > 我在哪里将切片添加到最终的 javascript 字符串？

javascript - 我在哪里将切片添加到最终的 javascript 字符串？

问题描述

<body>
   
    <div id="dice0" class="dice">0</div>
    <div id="dice1" class="dice">0</div>
    <button onclick ="rollDice()">Roll a Pair of Dice</button>
    <br>
    <button onclick ="rollDice1000()"> Roll 1000 Times</button>
    <br>
    <div id="result"class="current"></div>
    
    <div id="list" class="list"></div>
    <script src="code.js"></script>
  </body>
</html>


let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

function rollDice(){
    let dice0 = document.getElementById("dice0");
    let dice1 = document.getElementById("dice1");
    let result = document.getElementById("result");
    let list = document.getElementById("list");
    let d0= Math.floor(Math.random()*6)+1;
    let d1= Math.floor(Math.random()*6)+1;
    let total = d0+d1;
    dice0.innerHTML = d0;
    dice1.innerHTML = d1;
    result.innerHTML = "You rolled "+total+"."
    results[total]+=1;
   
    list.innerHTML = results.map((val, index)=> `You have rolled ${index}: ${val} times`).join('<br/>');

}

上面的代码是一个简单的 javascript 骰子游戏，它跟踪给出结果的次数。
结果应该在 2 到 12 之间
你会看到：

你已经滚动了 0：null 次
你已经滚动了 1：null 次

最后的字符串吐出了 2 个不应列出的 null 变量；因为它们不能滚动（0 和 1）我不想改变数组。我在哪里以及如何添加“.slice()”以将它们从输出中删除？或者有没有更好的方法来使用javascript？

随后，有没有办法打破名单？我可以用 CSS 组织输出吗？
例如;

[你已经滚动 2：7 次。] [你已经滚动 3：2 次。] [你已经滚动 4：5 次。] [等等]
假设括号是样式元素

标签： javascriptarraysdom

解决方案

如果不是，您可以使用三元运算符仅添加${val} times到输出中：valnull

let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

function rollDice() {
  let dice0 = document.getElementById("dice0");
  let dice1 = document.getElementById("dice1");
  let result = document.getElementById("result");
  let list = document.getElementById("list");
  let d0 = Math.floor(Math.random() * 6) + 1;
  let d1 = Math.floor(Math.random() * 6) + 1;
  let total = d0 + d1;
  dice0.innerHTML = d0;
  dice1.innerHTML = d1;
  result.innerHTML = "You rolled " + total + "."
  results[total] += 1;

  list.innerHTML = results.map((val, index) => val != null ? `You have rolled ${index} ${val} times` : null).join('<br/>');

}
<body>

  <div id="dice0" class="dice">0</div>
  <div id="dice1" class="dice">0</div>
  <button onclick="rollDice()">Roll a Pair of Dice</button>
  <br>
  <button onclick="rollDice1000()"> Roll 1000 Times</button>
  <br>
  <div id="result" class="current"></div>

  <div id="list" class="list"></div>
  <script src="code.js"></script>
</body>

</html>

如果您想为每个样式设置样式，可以将它们包装在一个div：

let results = [null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

function rollDice() {
  let dice0 = document.getElementById("dice0");
  let dice1 = document.getElementById("dice1");
  let result = document.getElementById("result");
  let list = document.getElementById("list");
  let d0 = Math.floor(Math.random() * 6) + 1;
  let d1 = Math.floor(Math.random() * 6) + 1;
  let total = d0 + d1;
  dice0.innerHTML = d0;
  dice1.innerHTML = d1;
  result.innerHTML = "You rolled " + total + "."
  results[total] += 1;

  list.innerHTML = results.map((val, index) => val != null ? `<div class="item">You have rolled ${index} ${val} times</div>` : null).join('<br/>');

}
.item {
  padding: 10px;
  background: lightgrey;
  margin: 10px;
}

#list {
  display: flex;
  flex-wrap: wrap;
}
<body>

  <div id="dice0" class="dice">0</div>
  <div id="dice1" class="dice">0</div>
  <button onclick="rollDice()">Roll a Pair of Dice</button>
  <br>
  <button onclick="rollDice1000()"> Roll 1000 Times</button>
  <br>
  <div id="result" class="current"></div>

  <div id="list" class="list"></div>
  <script src="code.js"></script>
</body>

</html>

推荐阅读