Question

我试图创建一些按钮来控制画布中的某些内容。我希望它们出现在画布的右侧，因此我使用CSS设置样式并移动它们。我还制作了一个计时器，该计时器在按下绿色按钮“开始”时开始闪烁，在按下“完成”按钮时停止。我的问题是，当我移到正确的位置时，第一个按钮不起作用或没有被按下。你知道为什么会这样吗？这是我的代码执行我所说的部分。预先谢谢你！

document.body.style.backgroundColor = "#FAFAD2";

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

window.requestAnimFrame = (function(callback) {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
})();

var startTime = Date.now();
var t;
var timer_is_on = 0;

function timedCount() {
  var elapsedTime = Date.now() - startTime;
  document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);
  t = setTimeout("timedCount()", 100);
}

function doTimer() {
  if (!timer_is_on) {
    timer_is_on = 1;
    timedCount();
  }
}

function stopCount() {
  clearTimeout(t);
  timer_is_on = 0;
}

$('#start').on('click', function() {
  doTimer();
});

$('#finish').on('click', function() {
  stopCount();
});

.timer {
  position: absolute;
  bottom: 55px;
  left: 600px;
}

.both,
.one,
.two,
.timer {
  display: block;
  padding: 30px;
  position: absolute;
  left: 600px;
}

.both button {
  background-color: #4CAF50;
  border: 1px solid black;
  margin-left: 50px;
  color: white;
  padding: 15px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 100px;
  display: block;
  position: relative;
  bottom: 20px;
}

.one button {
  border: 1px solid black;
  color: white;
  padding: 15px 5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 200px;
  display: block;
  position: relative;
  top: 100px;
}

.two button {
  border: 1px solid black;
  color: white;
  padding: 15px 5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  width: 200px;
  display: block;
  position: relative;
  top: 300px;
}

.timer button {
  background-color: #696969;
  border: 1px solid black;
  color: white;
  padding: 12px 8px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  width: 80px;
}

<!DOCTYPE html>
<html>

<head>
  <title> Simulation </title>

</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div class='both'>
    <button type='button' id='start'>START</button>
    <button type='button' id='stop'>STOP</button>
  </div>
  <div class='one'>
    <button type='button' id='start1' style='background-color:#B22222;'>START 1</button>
    <button type='button' id='stop1' style='background-color:#B22222;'>STOP 1</button>
    <button type='button' id='position1' style='background-color:#B22222;'>POSITION 1</button>
  </div>
  <div class='two'>
    <button type='button' id='start2' style='background-color:#FFD700;'>START 2</button>
    <button type='button' id='stop2' style='background-color:#FFD700;'>STOP 2</button>
    <button type='button' id='position2' style='background-color:#FFD700;'>POSITION 2</button>
  </div>
  <div class='timer'>
    <span id="timer"></span> sec
    <button type='button' id='finish'>FINISH</button>
  </div>
  <br>
  <canvas id="myCanvas" width="455" height="650" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>



</body>

</html>

Answer 1

您的代码无法正常工作，因为您试图在字符串而不是函数上设置超时：

function timedCount() {
  var elapsedTime = Date.now() - startTime;
  document.getElementById("timer").innerHTML = (elapsedTime / 1000).toFixed(3);
  t = setTimeout("timedCount()", 100);
}

更改此行：

t = setTimeout(timedCount, 100);

它应该可以工作。

Answer 2

尝试将z-index添加到按钮包装器以及画布的相对位置

.both {z-index:99;} canvas{position:relative;z-index:10;}

为什么我的某些按钮在html5画布上无法正常工作？

2 个答案: