如何暂停文本 Javascript / var textarray

How to pause Text Javascript / var textarray?

本文关键字：Javascript var textarray 文本 何暂停 暂停      更新时间：2023-09-26

我正在尝试通过单击页面来暂停和恢复javascript。

我有文本滚动，通过淡入淡出来更改。

我在网上找到的解决方案是如何暂停选框，但我认为该解决方案不适用，因为我的代码不使用选框标签。

同样对于我的文本滚动，我不显示文本，而是显示图像。

我想知道如何通过单击页面来暂停和恢复图像？

<div id="menu">
      <button id="start-stop">Start/stop</button>
</div>
<div id="random_text"></div>
</div>
    <script type="text/javascript">
$(window).load(function() {
  $(window).resize(function() {
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
  });
  var textarray = [
    "<img class='"tall'" src='"1.png'" alt='"1'"></img><span class='"by'">Example</span>" ,
    "<img class='"wide'" src='"2.png'" alt='"2'"></img><span class='"by'">Example</span>",
    "<img class='"wide'" src='"3.png'" alt='"3'"></img><span class='"by'">Example</span>",
    "<img class='"wide'" src='"4.png'" alt='"4'"></img><span class='"by'">Example</span>",
  ];
  var firstTime = true;
  function RndText() {
    var rannum = Math.floor(Math.random() * textarray.length);
    if (firstTime) {
      $('#random_text').fadeIn('fast', function() {
        $(this).html(textarray[rannum]).fadeOut('fast');
      });
      firstTime = false;
    }
    $('#random_text').fadeOut('fast', function() {
      $(this).html(textarray[rannum]).fadeIn('fast');
    });
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    // $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
  }
  $(function() {
    // Call the random function when the DOM is ready:
    RndText();
  });
    var inter = setInterval(function() {
    intervalRunning = true;
    RndText();
  }, 3000);
});
$(document).on('click', '#start-stop', function(){
  if (intervalRunning) {
    intervalRunning = false;
    clearInterval(inter);
  } else {
    inter = setInterval(function() {
      intervalRunning = true;
      RndText();
    }, 3000);
  }
})
function toggle_visibility(id) {
                   var e = document.getElementById(id);
                   if(e.style.display == 'block')
                      e.style.display = 'none';
                   else
                      e.style.display = 'block';
                }
    </script>

我创建了一个jsbin来展示一个基本的解决方案。

由于您使用的是jQuery，因此我将更改所有内容的结构。 我会将代码包装在 $(document).ready 中，以便在 DOM 准备就绪后触发。

在开始时创建一个bool来跟踪间隔是否正在运行：

var running = false;

为间隔创建一个处理程序，以便根据需要打开或关闭：

var handleInterval = function(){
    if (running) {
      running = false;
      clearInterval(intObj);    
    } else {
      intObj = setInterval(function(){
        running = true;
        RndText();
      }, 1500);
    }
  };

为按钮设置处理程序：

$(document).on("click", "#pause_me", function(){
    handleInterval();
  });

通过调用 handleInterval 来启动整个事情：

handleInterval();
相关文章：