如何为我的计时器添加毫秒?

时间:2017-03-29 13:03:33

标签: javascript jquery timer countdown

我尝试将毫秒放到我的计时器上,但它们的作用就像秒而不是毫秒。他们已经过了几秒钟。但是没有表现得像毫秒。此外,我一直试图让百分比看到倒计时有多远。那么我该如何解决这个问题?

这是与整个脚本的链接:http://embed.plnkr.co/hUeAAzBBszAnCq7FdeGO/



// Code goes here
window.addEventListener('load', start);

function start() {
  countdown();
}

function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57))
  //if charcode is keycode more then 31 and keycode less then 48 and more then 57 return false 
  {
    return false;
    //aren't numbers
  } else {
    return true;
    //only can type numbers
  }
}

function countdown(val) {
  var counter = parseInt(val);
  var myVar = setInterval(function() {
    if (counter >= 0) {
      document.getElementById("timer").innerHTML = Math.floor(counter / 60) + ":" + ("0" + Math.floor(counter) % 60).slice(-2) + "." + Math.floor((counter % 1000) * 1000) / 1000;
      //counter/60 calculates the minute and counter%60 calculates the seconds.
      counter--;
    }
    if (counter < 0) {
      document.getElementById("timer").innerHTML = "That was the countdown";
    }
  }, 1000)
}

var stop = 0;

function decrease() {
  var percent = Number($('#counter span').text());
  if (percent > stop) {
    $('#counter span').text(--percent);
    var t = setTimeout(decrease, 1000);
  }
}

setTimeout(decrease, 1000);

function count() {
  var input = document.getElementById("number_input").value;
  countdown(input);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

only numbers please :
<input type="text" placeholder="type in a number" id="number_input" onkeypress="return isNumberKey(event)" />
<button onclick="count()">tel af</button>

<p id="timer">0</p>
<div id="counter">
  <p><span>100</span>%</p>
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您的超时设置错误,每1秒设置一次,导致问题。

1000 = 1秒 100 = 100毫秒......现在根据需要进行调整

您需要隔离管理计数器的方式或不同地更改HTML更改逻辑

答案 1 :(得分:0)

您在超时和间隔中使用1000。该数字以毫秒为单位。你必须做一些数学计算才能同时倒数秒和毫秒。

与您的问题无关:您正在使用JQuery和getElementById。为什么不改变

document.getElementById("timer").innerHTML

进入

$("#timer").html(...)