我怎樣才能使這個活動的onclick？

Question

var span = document.getElementById('loading_dots');

var int = setInterval(function() {
    if ((span.innerHTML += '●').length == 4) 
        span.innerHTML = '';
}, 400);

(function(){
    var loading_dots = document.getElementById("loading_dots"),

      show = function(){
        loading_dots.style.display = "block";
        setTimeout(hide, 5000); // 5 seconds
      },

      hide = function(){
        loading_dots.style.display = "none";
      };

    show();
})();

如何使loading_dots從單擊按鈕開始，並在每次單擊按鈕時重新激活？ 最底層的功能是在5秒鍾后將其停止，也許可以將其合並為一個功能？

需要使用3個單獨的按鈕並在每次單擊時重新啟動，還需要顯示在<span class="loading_dots" id="loading_dots"></span>任何方法都可以，例如css，jquery或javascript

Answer 1

這是一個jQuery版本：

 (function ( $ ) { $.fn.loader = function( options ) { var settings = $.extend({ text:"●", spn: undefined }, options ); $.each(this, function(){ var btn = this; var int; var spn; if (settings.spn === undefined) { spn = $("<span/>" , { "class":"loading_dots" }); $(btn).append(spn); } else { spn= $(settings.spn); } var show = function(){ btn.setAttribute("disabled", "disabled") clearInterval(int); spn.show(); int = setInterval(function() { if ((spn[0].innerHTML += settings.text).length == 4) spn.html(""); }, 400); setTimeout(hide, 5000); // 5 seconds } var hide = function (){ spn.hide(); btn.removeAttribute("disabled", "disabled") clearInterval(int); } btn.addEventListener("click", show); }); }; }( jQuery )); // now bind it by its class, this only need to be run once every time new button is added to the html $(".btn").loader({spn:".loading_dots"}); // and you could also specify the text by // $(".btn").loader({text: "*"}); 

 .loading_dots { color:red; display:none; width:100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="loading_dots"></span> <button class="btn" type="button" > submit </button> <button class="btn" type="button" > submit </button> </div> 

Answer 2

如果要為單擊按鈕添加事件偵聽器，只需選擇按鈕，然后在循環中添加偵聽器：

document.querySelectorAll("button").forEach(e => e.addEventListener("click", myFunc));

或者，偵聽任何單擊，然后檢查事件的目標是否為按鈕：

document.addEventListener("click", (e) => if (e.target.tagName == "BUTTON") myFunc());

Answer 3

您可以在大部分代碼中使用CSS，而不僅僅是在父#loading元素上切換show類：

 const Loading = () => { let tOut = null; const el = document.querySelector("#loading"); const show = () => { el.classList.add('show'); tOut = setTimeout(hide, 5000); }; const hide = () => { el.classList.remove('show'); clearTimeout(tOut); }; return { show, hide }; }; const loadingDots = Loading(); const loadBtns = document.querySelectorAll('.load'); [...loadBtns].forEach(el => el.addEventListener('click', loadingDots.show)); // you can always use loadingDots.hide() to hide when needed (before the 5sec ticks out) 

 #loading { position: fixed; z-index: 100; top:0; left: 0; width:100vw; height:100vh; display:flex; background: rgba(0,0,0,0.5); color: #fff; font-size: 3em; align-items: center; justify-content:center; visibility: hidden; opacity: 0; transition: 0.4s; } #loading.show { opacity: 1; visibility: visible; } @keyframes blink { 50% {opacity: 1;} } #loading i:after {content: "\\25cf";} #loading i { opacity: 0; animation: blink 1.2s infinite; } #loading i:nth-child(2) { animation-delay: .2s; } #loading i:nth-child(3) { animation-delay: .4s; } 

 <div id="loading"><i></i><i></i><i></i></div> <button class="load">LOAD</button> <button class="load">LOAD</button> <button class="load">LOAD</button> 

Answer 4

一個普通的javascript版本，可以選擇以編程方式/手動方式停止顯示加載點。 只需傳遞您要附加加載的父元素的ID。 默認情況下，加載將添加到父對象，但是您可以選擇將對象作為帶有position屬性的最后一個參數傳遞。

 function removeLoading(id) { var parent = document.getElementById(id); var spans = parent.getElementsByClassName("loading_dots"); while (spans.length > 0) { var span = spans[0]; if (span.dataset.timerId) { clearTimeout(span.dataset.timerId); } span.remove(); } } function addLoading(id, options) { options = options || {}; var parent = document.getElementById(id); var existingSpans = parent.getElementsByClassName("loading_dots"); if (existingSpans.length > 0) { removeLoading(id); } var span = document.createElement("span"); span.setAttribute("class", "loading_dots"); if (options.timerId) { span.dataset.timerId = options.timerId; } parent.insertAdjacentElement(options.position || "beforeend", span); setInterval(function () { if ((span.innerHTML += '●').length == 4) span.innerHTML = ''; }, 400) } function addLoadingWithTimeout(id, ms, options) { options = options || {}; var timerId = setTimeout(function () { removeLoading(id) }, ms); options.timerId = timerId; addLoading(id, options); } 

 <p id="load1">Load 1 - Will stop automatically in 3 seconds after starting. </p> <button onclick="addLoadingWithTimeout('load1', 3000)">Start Load 1</button> <button onclick="removeLoading('load1')">Stop Load 1</button> <p id="load2">Load 2 - Only manual Stop </p> <button onclick="addLoading('load2')">Start Load 2</button> <button onclick="removeLoading('load2')">Stop Load 2</button> 

Answer 5

干得好。 在HTML端，您只需將事件傳遞到所需的按鈕，然后將其作為要顯示加載圖標的span / div的ID（作為字符串）傳遞給它。

HTML：

  <button id="btn" onclick="load(event, 'loadDiv')">Load</button>
  <div>
    <span id="loadDiv"></span>    
  </div>

在下面，我們從事件獲取btn id，因此您不必每次都手動傳遞它。 然后，我們為innerhtml圖標定義函數。 最后，我們每0.4秒運行一次showIcon函數，然后在5秒后清除間隔。

JS：

function load(e, location) {
  var btn = document.getElementById(e.srcElement.id)
  var loadDiv = document.getElementById(location)

  function showLoad() {
    if (loadDiv.innerHTML.length < 3) {
      return loadDiv.innerHTML += '●'
    }
    loadDiv.innerHTML = ''
  }

  (function() {
    var loadIcons = setInterval(function() {
      showLoad()
    }, 400)

    var clear = setTimeout(function() {
      clearInterval(loadIcons)
    }, 5000)
  })()
}

希望這可以幫助！

Answer 6

您可以在函數中定義代碼，並將點擊處理程序添加到按鈕。

function myFunc() {
 var span = document.getElementById('loading_dots');

 var int = setInterval(function() {
     if ((span.innerHTML += '●').length == 4) 
         span.innerHTML = '';
 }, 400);

 (function(){
     var loading_dots = document.getElementById("loading_dots"),

       show = function(){
         loading_dots.style.display = "block";
         setTimeout(hide, 5000); // 5 seconds
       },

       hide = function(){
         loading_dots.style.display = "none";
       };

     show();
 })();
}

document.getElementById("myBtn1").addEventListener("click", myFunc); 
document.getElementById("myBtn2").addEventListener("click", myFunc);