时间戳

首页 > 解决方案 > onClick 按钮更改 innerHtml 而不停止军鼓（Javascript / JQuery）

javascript - onClick 按钮更改 innerHtml 而不停止军鼓（Javascript / JQuery）

问题描述

每个节拍都有一个小鼓 (1,2,3,4) 所以“节拍”是一个显示计数的屏幕。

如果我单击“节拍”按钮在屏幕上写“禁用”（1、2、3、4），我想要在不停止内存计数的情况下。如果我单击启用节拍，请从它离开的地方继续并写入启用。但我不希望记忆中的计数停止。可能吗？

beat 表示 CSS 上的屏幕 k 表示音序器上的军鼓声。Pattern 表示音序器 Pattern step 表示音序器上的节拍

<button id="beat" onclick="playPattern()">Disable</button>\

function playPattern() {
    for (var k in Pattern) {
    
    if (Pattern[k][Step] == "1") {
        document.getElementById("beat").innerHTML = "1";
    }
    if (Pattern[k][Step] == "2") {
        document.getElementById("beats").innerHTML = "2";
    }
    if (Pattern[k][Step] == "3") {
        document.getElementById("beats").innerHTML = "3";
    }
    if (Pattern[k][Step] == "4") {
        document.getElementById("beats").innerHTML = "4";
    }
    else  {
    document.getElementById('beat').onclick = function() {
                 beat.innerHTML = 'Disable';
    }

标签： javascript

解决方案

我在理解您的用例时遇到了一些困难，但这个示例应该展示如何将计数存储在一个名为的变量中count，并在您选择时在屏幕上显示该值。（它还使用内置setInterval函数每秒推进计数。）

该disabled变量跟踪显示器是否处于禁用状态，并且该playOrPause函数使用此信息来决定是 1) 恢复计时器并显示当前计数还是 2) 停止计时器并显示“禁用”消息。

const
  pattern = [1, 2, 3, 4],
  beat = document.getElementById("beat"),
  beats = document.getElementById("beats");

let
  count = 0,
  disabled = true,
  timer = null;

beat.addEventListener("click", playOrPause);

function playOrPause() {
  if(disabled === true){
    timer = setInterval(advanceCount, 1000);
    beats.textContent = count;
    beat.textContent = "PAUSE";
    disabled = false;
  }
  else{
    clearInterval(timer);
    beats.textContent = "(Disabled)";
    beat.textContent = "PLAY";
    disabled = true;
  }
}

function advanceCount(){
  if(count == 4){ count = 1; }
  else{ count++; }
  beats.textContent = count;
}
#beat{ margin: 1rem; }
#beats{ margin-left: 2rem; font-size: 1.5rem; }
<button id="beat">PLAY</button>
<div id="beats"></div>

推荐阅读