javascript - 你如何为一个功能制作一个开始/停止按钮？

Question

任何人都知道我可以如何制作一个开始/停止按钮来控制这个在 javascript 中的幻灯片吗？

<script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
        setTimeout(showSlides, 4000); // Change image every 4 seconds
    }
</script>

标签： javascript

Answer 1

let timerInterval;

const incrementTimer = () => {
  const counterPara = document.querySelector('#counter');
  let counterVal = parseInt(counterPara.textContent);
  counterPara.textContent = counterVal + 1;
}

const startTimer = () => {
  timerInterval = setInterval(incrementTimer, 1000);
}

const stopTimer = () => {
  clearInterval(timerInterval);
}

<p id="counter">0</p>
<button onclick="startTimer()">Start</button>
<button onclick="stopTimer()">Stop</button>