Question

问题在于，当它应该通过达到某个值来停止时，它会开始出现故障（来回快速地来回）。

每次都不会出现故障，通常会在3次中出现故障。经过一次刷新，因为它不会再次工作。

function number() {
  var xd = 20;
  var min = 0;
  var max = 100 - min;
  var mid = (100 - min) / 2 + min;
  var x = Math.floor((Math.random() * max) + min);
  //document.getElementById("roll").value = x;
  document.getElementById("demo").innerHTML = x;
  var b = setInterval(function() {
    var newVal = $('#roll').val(function(i, val) {
      if (val > x) {
        return (+val - 0.1);
        clearInterval(b);
      } else {
        return (+val + 0.1);
        clearInterval(b);
      }
    });
  }, 1);
  if (x > mid) {
    console.log("high");
  } else {
    console.log("low");
  }
  console.log(x);
}

function random() {
  var counter = 6;
  var a = setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;
    }
    if (counter === 0) {
      clearInterval(a);
      span.innerHTML = '<h2>CountDown Complete!</h2>';
      number();
    }
  }, 1000);
}

body {}

p {}

button {}

input[type=range] {
  -webkit-appearance: none;
  border: 1px solid white;
  width: 500px;
  pointer-events: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 500px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  min-width: 3px;
  max-width: 3px;
  width: 3px;
  background: #5CCA96;
  margin-top: -7px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 500px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 3px;
  background: #5CCA96;
}

input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 500px;
  height: 5px;
  background: transparent;
  border-color: transparent;
  border-width: 6px 0;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 20px;
  width: 3px;
  background: #5CCA96;
}

input[type=range]:focus::-ms-fill-lower {
  background: #888;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

<html>

<head>
  <title>Random</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
  <button onclick="random()">Try it</button>
  <div id="count"></div>
  <p id="demo"></p>
  <input type="range" id="roll" name="slider" min="0" max="100" value="50" step="0.01" />

  <script src="script.js"></script>
</body>

</html>

应该停止时，范围滑块会出现故障

0 个答案: