Question

我有一个代码片段，试图用twig替换浏览器原生DOF_INDEX HTML元素。我在点击audio的{{1}}元素上调用play()方法，然后通过audio每秒更新文件的button。< / p>

但我每次都要点击监听器对象（currentTime）来更新计时器。当我将代码移出jQuery on-click块时，我得到一个设置为NaN的计时器值。

如何在不每秒点击按钮的情况下更新计时器？为什么我出了块时会得到一个非数字错误？

这是我的示例代码：

setInterval

这是我的JavaScript：

button

然后我的HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
.hidden-audio-wrapper{display:none}
input{
  -webkit-appearance: none;
  width: 160px;
  height: 20px;
  margin: 10px 50px;
  background: linear-gradient(to left,  #f3f3f3 0%, #007bff 80%);
  /* background: linear-gradient(to right, #f3f3f3 0%, #f3f3f3 100%); */
  background-size: 150px 10px;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: none;
  zoom: 100%;
  display: block;
  margin: auto;
  -webkit-outline-radius: 25px;
  border-radius:10px;
  margin-bottom: 30px;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid;
  -webkit-outline-radius: 25px;
  border-radius:10px;
  width: 20px;
  height: 20px;
  background: #f2f2f2;
  position: relative;
  z-index: 3;
}

input::-webkit-slider-thumb:after {
  content: " ";
  width: 160px;
  height: 10px;
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 5px;
  background: #2ecc71;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-track {
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #fff;
}

input[type="range"]::-ms-thumb {
  background-color: #ecf0f1;
  border: 1px solid #bdc3c7;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  cursor: pointer;
}
</style>

<input type="button" id="audio-rep-id" value="click here to play" />

嵌套在单击事件中时setInterval不重复

0 个答案: