我如何才能使该活动的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();
})();

如何做到这一点，使load_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，而不仅仅是在父show元素上切换#loading类：

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);