Question

我一直在为一个学校项目编写一个骰子，我似乎无法找到解决方案。基本上当我尝试在for循环结束后读取“rnd”时它不会输出它。它只适用于倒数第二个循环。 PS：文字是荷兰文，但只需点击左下角的按钮即可开始掷骰子。

var rnd = 0
var c = document.getElementById('field');
var dbl = c.getContext('2d');
dbl.fillStyle = "white";
dbl.fillRect(0, 0, 340, 340);
var kies = 0;
document.getElementById("kies").innerHTML = "gekozen getal: " + kies;

var n1 = document.getElementById('n1');
n1.style.cursor = 'pointer';
n1.onclick = function() {
  kies = 1;
  document.getElementById("kies").innerHTML = "gekozen getal: " + kies;
};

var n2 = document.getElementById('n2');
n2.style.cursor = 'pointer';
n2.onclick = function() {
  kies = 2;
  document.getElementById("kies").innerHTML = "gekozen getal: " + kies;

};
var n3 = document.getElementById('n3');
n3.style.cursor = 'pointer';
n3.onclick = function() {
  kies = 3;
  document.getElementById("kies").innerHTML = "gekozen getal: " + kies;

};
var n4 = document.getElementById('n4');
n4.style.cursor = 'pointer';
n4.onclick = function() {
  kies = 4;
  document.getElementById("kies").innerHTML = "gekozen getal: " + kies;

};
var n5 = document.getElementById('n5');
n5.style.cursor = 'pointer';
n5.onclick = function() {
  kies = 5;
  document.getElementById("kies").innerHTML = "gekozen getal: " + kies;

};
var n6 = document.getElementById('n6');
n6.style.cursor = 'pointer';
n6.onclick = function() {
  kies = 6;
  document.getElementById("kies").innerHTML = "gekozen getal: " + kies;

};

var clk = document.getElementById('clk');
clk.style.cursor = 'pointer';
var cnt = 0
clk.onclick = function() {
  for (var i = 0; i < 10; i++) {
    setTimeout(function() {
      var rnd = Math.random() * 6;
      rnd = Math.round(rnd);

      if (rnd == 1) {
        een();
      };
      if (rnd == 2) {
        twee();
      };
      if (rnd == 3) {
        drie();
      };
      if (rnd == 4) {
        vier();
      };
      if (rnd == 5) {
        vijf();
      };
      if (rnd == 6) {
        zes();
      };
      cnt++
      if (cnt == 10) {
        alert("test");
      }
    }, 10 * i * i);
  };
};

function een() {
  var c = document.getElementById('field');
  var dbl = c.getContext('2d');
  dbl.fillStyle = "white";
  dbl.fillRect(0, 0, 340, 340);
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  var radius = 30;
  context.beginPath();
  context.fillStyle = 'black';
  context.arc(170, 170, radius, 0, 2 * Math.PI, false);
  context.fill();
}

function twee() {
  var c = document.getElementById('field');
  var dbl = c.getContext('2d');
  dbl.fillStyle = "white";
  dbl.fillRect(0, 0, 340, 340);
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  var radius = 30;
  context.beginPath();
  context.fillStyle = 'black';
  context.arc(60, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
}

function drie() {
  var c = document.getElementById('field');
  var dbl = c.getContext('2d');
  dbl.fillStyle = "white";
  dbl.fillRect(0, 0, 340, 340);
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  var radius = 30;
  context.beginPath();
  context.fillStyle = 'black';
  context.arc(60, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(170, 170, radius, 0, 2 * Math.PI, false);
  context.fill();
}

function vier() {
  var c = document.getElementById('field');
  var dbl = c.getContext('2d');
  dbl.fillStyle = "white";
  dbl.fillRect(0, 0, 340, 340);
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  var radius = 30;
  context.beginPath();
  context.fillStyle = 'black';
  context.arc(60, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(60, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
}

function vijf() {
  var c = document.getElementById('field');
  var dbl = c.getContext('2d');
  dbl.fillStyle = "white";
  dbl.fillRect(0, 0, 340, 340);
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  var radius = 30;
  context.beginPath();
  context.fillStyle = 'black';
  context.arc(170, 170, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(60, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(60, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
}

function zes() {
  var c = document.getElementById('field');
  var dbl = c.getContext('2d');
  dbl.fillStyle = "white";
  dbl.fillRect(0, 0, 340, 340);
  var canvas = document.getElementById('field');
  var context = canvas.getContext('2d');
  var radius = 30;
  context.beginPath();
  context.fillStyle = 'black';
  context.arc(60, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(60, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 280, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 60, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(60, 170, radius, 0, 2 * Math.PI, false);
  context.fill();
  context.beginPath();
  context.arc(280, 170, radius, 0, 2 * Math.PI, false);
  context.fill();
}

body {
  color: white;
  background-color: grey;
  font-family: Arial;
  font-size: 40px;
  font-weight: bold;
}
#n1,
#n2,
#n3,
#n4,
#n5,
#n6 {
  float: left;
}
.number {
  background-color: white;
  margin: 10px;
  width: 100px;
  height: 100px;
  text-align: center;
  padding: 0px;
}
#clk {
  background-color: white;
  margin: 10px;
  width: 700px;
  height: 100px;
  text-align: center;
  float: left;
  padding: 0px;
}
p {
  color: black;
}
h1 {
  color: white;
}
#getal {
  background-color: white;
  margin: 10px;
  padding: 0px;
  width: 700px;
  height: 100px;
  text-align: center;
  float: left;
}
#b1 {
  width: 720px;
  height: 360px;
  float: left;
}
#b2 {
  width: 600px;
  height: 360px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
#tot {}

<div id="b1">
  <div id="n1" class="number">
    <p>1</p>
  </div>
  <div id="n2" class="number">
    <p>2</p>
  </div>
  <div id="n3" class="number">
    <p>3</p>
  </div>
  <div id="n4" class="number">
    <p>4</p>
  </div>
  <div id="n5" class="number">
    <p>5</p>
  </div>
  <div id="n6" class="number">
    <p>6</p>
  </div>
  <div id="getal">
    <p id="kies"></p>
  </div>
  <div id="clk">
    <p>Klik hier om te gooien</p>
  </div>
</div>
<div id="b2">
  <canvas id="field" width="340" height="340"></canvas>
</div>

var clk = document.getElementById('clk');
clk.style.cursor = 'pointer';
var cnt = 0
clk.onclick = function() {
  for (var i = 0; i < 10; i++) {
    setTimeout(function() {
      var rnd = Math.random() * 6;
      rnd = Math.round(rnd);

      if (rnd == 1) {
        een();
      };
      if (rnd == 2) {
        twee();
      };
      if (rnd == 3) {
        drie();
      };
      if (rnd == 4) {
        vier();
      };
      if (rnd == 5) {
        vijf();
      };
      if (rnd == 6) {
        zes();
      };

      cnt++
      if (cnt == 10){
      alert("test");
      }
    }, 10 * i * i);
  };
};

Answer 1

哟，经过尝试和尝试，我终于成功了。结果是警报会在其余代码之前触发一个循环。我不知道为什么，但我设法通过添加这个来解决这个问题：

var clk = document.getElementById('clk');
clk.style.cursor = 'pointer';
var cnt = 0
clk.onclick = function() {
for (var i = 0; i < 10; i++) {
setTimeout(function() {
  var rnd = Math.random() * 6;
  rnd = Math.round(rnd);

  if (rnd == 1) {
    een();
  };
  if (rnd == 2) {
    twee();
  };
  if (rnd == 3) {
    drie();
  };
  if (rnd == 4) {
    vier();
  };
  if (rnd == 5) {
    vijf();
  };
  if (rnd == 6) {
    zes();
  };

在这一部分，我将rnd等于得分，这是在循环之前声明的新变量。我也在循环外调用一个函数，这样我就可以进一步处理变量。

  cnt++
  if (cnt == 10){
  score = rnd
  loop();
  }
}, 10 * i * i);
};
};

这是我谈论的循环

function loop(){
cnt = 0
if (kies == score){
alert("nice");
}
else {
alert("jammer");
}
}

在javascript中减慢循环后读取输出

1 个答案: