Question

我有一个简单的功能，每2秒将一个正方形的颜色从红色变为蓝色。我需要setInterval的速度来反映柜台中的价值。我似乎无法弄清楚如何在setInterval中定位时间值。没有jQuery，谢谢。这是我的代码的demo。

＆＃13;

function Tempo() {
  var tempoVal = document.getElementById("tempo-value");
  var tempoBtn = tempoVal.querySelectorAll("[data-btn]");
  var tempoNum = tempoVal.querySelector("[data-value]");
  for (var i = 0; i < tempoBtn.length; i++) {
    tempoBtn[i].onclick = function() {
      if (this.getAttribute("data-btn") == "-") {
        tempoNum.innerHTML = parseFloat(tempoNum.innerHTML) - 1;
      } else if (this.getAttribute("data-btn") == "+") {
        tempoNum.innerHTML = parseFloat(tempoNum.innerHTML) + 1;
      }
    };
  }
}

let myTempo = new Tempo(document.getElementById("tempo-value"));

//BLOCK
setInterval(function() {
  var block = document.getElementById("block");
  block.classList.toggle("color");
}, 2000);

＆＃13;

#tempo-value {
  font-family: Sans-Serif;
  font-size: 24px;
  text-align: center;
  padding: 16px;
  user-select: none;
}

.btn {
  display: inline-flex;
  cursor: pointer;
}

.value {
  display: inline-block;
  width: 40px;
  text-align: right;
}

#block {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}

#block.color {
  background-color: blue;
}

＆＃13;

<div id="tempo-value">
  <div data-btn='-' class="btn">&#9669</div>
  <div data-value class="value">1</div><span> second(s)</span>
  <div data-btn='+' class="btn">&#9659</div>
</div>
<div id="block"></div>

＆＃13;

Answer 1

您可以将<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="48dp" android:height="48dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <group> <path android:name="square" android:fillColor="#FFFF6F00" android:pathData="M0,0 L24,0 L24,24 L0,24 z" /> <path android:fillColor="#FF000000" android:pathData="M12,17c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1s3.1,1.39 3.1,3.1v2L8.9,8L8.9,6zM18,20L6,20L6,10h12v10z"/> </group> </vector> / setTimeout分配给变量。然后在必要时使用setInterval / clearTimeout将其删除。然后再设置一个。请参阅以下代码：

clearInterval

function Tempo() {
  var toggle = function() {
    document.getElementById('block')
      .classList.toggle('color');
  }
  var t = 1000;
  var blink = setInterval(toggle, t);
  var tempoVal = document.getElementById('tempo-value');
  var tempoBtn = tempoVal.querySelectorAll('[data-btn]');
  var tempoNum = tempoVal.querySelector('[data-value]');
  for (var i = 0; i < tempoBtn.length; i++) {
    tempoBtn[i].onclick = function() {
      clearInterval(blink);
      tempoNum.innerHTML = +
        this.getAttribute('data-btn') +
        +tempoNum.innerHTML;
      t = 1000 * tempoNum.innerHTML;
      blink = setInterval(toggle, t);
    }
  }
};

let myTempo = new Tempo(document.getElementById('tempo-value'));

body,
html {
  height: 100%;
}

#tempo-value {
  font-family: Sans-Serif;
  font-size: 24px;
  text-align: center;
  padding: 16px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn {
  display: inline-flex;
  cursor: pointer;
}

.value {
  display: inline-block;
  width: 40px;
  text-align: right;
}

#block {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}

#block.color {
  background-color: blue;
}

定位和操作setInterval计时器值

1 个答案: