如何为具有多种功能的按钮添加冷却效果？答案

【问题标题】：How do you add a cool down to a button with multiple functions?如何为具有多种功能的按钮添加冷却效果？
【发布时间】：2020-07-03 10:08:02
【问题描述】：

只添加了一个按钮，我希望它 - 单击时具有多种功能函数 1 返回一个“表情”和一个 GIF。我想实现一个冷却时间，这样你就不能快速点击/单击按钮。多个 onClicks 也不适合我。我玩过它并没有占上风。

编辑：我改变了设置代码的方式，出于某种原因，这两个 onClick 方法不起作用，它们是否是 Studio Visual Code 中的插件（当前从那里运行）？

<!DOCTYPE html>
<html>
<body> 
<style> 

.Vibe-Check-heading{
  font-size: 50px;
  font-family: Comfortaa;
  position: absolute;
    top: 0px;
    left: 765px;
}

.instructions {
  font-size: 25px;
  font-family: Comfortaa;
  position: absolute;
    top: 100px;
    left: 650px;

}

.steps {
    font-size: 15px;
    font-family: Comfortaa;
    position: absolute;
    top: 140px;
    left: 650px;
}

.vibe-btn{
  font-family: Comfortaa;
  padding: .75rem 2.5rem;
  font-weight: 600;
  background: #424242;
  z-index: 10;
  color: #fff;
  border-radius: 30px;
  border: 0;
  font-size: 14px;
  position: absolute;
    top: 200px;
    left: 650px;
  margin: auto;
  width:30%;
  size: 40px;
}

#name {
    font-family: Comfortaa;
    font-size: 25px;
    position: absolute;
    top: 240px;
    left: 680px;
}

#gif {
  margin: 20px;
  padding: 20px;
  position: absolute;
    top: 260px;
    left: 640px;
}
</style>

<!--------------------------------------------------------------------------->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<!--------------------------------------------------------------------------->
<div>
    <h1 class="Vibe-Check-heading"> Vibe Check</h1>
</div>
<!--------------------------------------------------------------------------->
<div>
    <h2 class="instructions"> Instructions: </h2>
    <h3 class="steps">click the button. </h3>  

</div>
<!--------------------------------------------------------------------------->

<div>

  <script> 

  var adjectives = ["big sad", "vibe check failed","Doot-Doot", "pog","straight-vibin", "bruh moment", "positive","AAAAAAAAAAAA","laundry basket","Jammin"];
var gifs = [

  "https://media.tenor.com/images/6eab85d212226d1af8c09bf2103ee955/tenor.gif", //0
  "https://i.imgur.com/fBQFAPm.gif", //1 
  "https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif", //2 
  "https://pbs.twimg.com/profile_images/630766742336352256/YyIteWQy_400x400.jpg",//3
  "https://media.giphy.com/media/gSJfzjAfRUCly/giphy.gif", //4
  "https://i.ytimg.com/vi/2ZIpFytCSVc/maxresdefault.jpg", //5
  "https://media.giphy.com/media/UqpjszfpiOiLA0L5le/giphy.gif", //6 
  "https://media.giphy.com/media/WTL02R1L7YCGUEunFy/giphy.gif", //7
  "https://p7.hiclipart.com/preview/767/88/925/falkor-the-neverending-story-childlike-empress-meme-laundry-laundry-basket.jpg", //8
  "https://i.kym-cdn.com/entries/icons/facebook/000/022/615/CybuEaUVIAAF_HV.jpg" //9
];

function generator(){

  var index = Math.floor(Math.random() * adjectives.length);
  document.getElementById("name").innerHTML = adjectives[index] + " ";
  document.getElementById("gif").src = gifs[index];
  alert($("name"));


};
function cooldown() {
var btn = $("vibe-btn");
  document.getElementsByClassName("vibe-btn")
  btn.css("pointer-events", "none" );
  setTimeout(function() {
    btn.css("pointer-events", "auto" );
  }, 80000);
}

  </script>

    <button onClick="generator()" class="vibe-btn">The Vibe is</button>
   <h1 style="text-align:center" id="name"></h1> 
  </div>
<!--------------------------------------------------------------------------->
  <div>
   <img id="gif" width="400" height="400" >
</div>
<!--------------------------------------------------------------------------->

</body>
</html>

【问题讨论】：

是$('#vibe-btn') 而不是$('vibe-btn')。
@Azametzin 还是不行。
我会给你一个替代的解决方案。

标签： javascript html css button timeout

【解决方案1】：

您可以使用 CSS 属性 pointer-events，而不是禁用。

var adjectives = ["big sad", "vibe check failed","Doot-Doot", "pog","straight-vibin", "bruh moment", "positive","AAAAAAAAAAAA","laundry basket","Jammin"];
var gifs = [

  "https://media.tenor.com/images/6eab85d212226d1af8c09bf2103ee955/tenor.gif", //0
  "https://i.imgur.com/fBQFAPm.gif", //1 
  "https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif", //2 
  "https://pbs.twimg.com/profile_images/630766742336352256/YyIteWQy_400x400.jpg",//3
  "https://media.giphy.com/media/gSJfzjAfRUCly/giphy.gif", //4
  "https://i.ytimg.com/vi/2ZIpFytCSVc/maxresdefault.jpg", //5
  "https://media.giphy.com/media/UqpjszfpiOiLA0L5le/giphy.gif", //6 
  "https://media.giphy.com/media/WTL02R1L7YCGUEunFy/giphy.gif", //7
  "https://p7.hiclipart.com/preview/767/88/925/falkor-the-neverending-story-childlike-empress-meme-laundry-laundry-basket.jpg", //8
  "https://i.kym-cdn.com/entries/icons/facebook/000/022/615/CybuEaUVIAAF_HV.jpg" //9
];

function generator(){

  var index = Math.floor(Math.random() * adjectives.length);
  document.getElementById("name").innerHTML = adjectives[index] + " ";
  document.getElementById("gif").src = gifs[index];

};

function cooldown() {
  var btn = $('#vibe-btn');
  btn.css("pointer-events", "none" );
  setTimeout(function() {
    btn.css("pointer-events", "auto" );
  }, 15000);
};

.vibe-check-heading{
  background-color: rgb(98, 211, 255);
  font-size: 20px;
  font-family: Comfortaa;
  padding: 10rem;
}

#vibe-btn{
  font-family: Comfortaa;
  padding: .75rem 2.5rem;
  font-weight: 600;
  background: #424242;
  z-index: 10;
  color: #fff;
  border-radius: 30px;
  border: 0;
  font-size: 14px;
  top: .5rem;
  left: .5rem;
  margin: auto;
  width:50%;
  size: 60px;

}

#gif-placer {
  margin: 20px;
  padding: 20px;
}

.instructions {
  font-size: 15px;
  font-family: Comfortaa;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />

<div>
    <h1 class="Vibe-Check-heading">
        Vibe Check
      </h1>
</div>

<div class="instructions">
    <h2>
        Instructions: <br> 
        Just click the button.
    </h2>
</div>

<div class="vibing">

    <button onclick="generator(); cooldown()" id="vibe-btn">The Vibe is</button>
    <h1 class="jumbotron text-center rokkitt" id="name"></h1>
  </div>

  <div class ="gif-placer">
<img id="gif" width="400" height="400" style="border-color: white;" >
</div>

【讨论】：

这仍然不起作用，也许我的 onClick 事件不起作用？
我不确定。可能是因为您调用了两次cooldown() 函数。我编辑了答案并添加了一个 sn-p。如果你运行它，你可以检查它是否工作。
它有效！但我在 Studio Visual 代码中运行它，它在那里工作不一样。但我会想办法的！谢谢！

【解决方案2】：

您可以启用和禁用按钮标签的disable 属性 https://www.w3schools.com/jsref/prop_pushbutton_disabled.asp

我使用 for 循环来设置计时器并使用布尔值来禁用和启用按钮。随意玩耍（出于某种原因，我无法让 y 更改按钮的 innerText 以在必要时在启用和禁用之间切换，但对于不同的帖子来说这是一个不同的问题）

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<button id = "buttonID" type = "button" onclick = "cooldown()" >The Button</button>


<script>

    var x = document.getElementById("buttonID").disabled = false;
    var y = document.getElementById("buttonID").innerText = "Enabled"

    //cooldown function
    var cooldown = function(){
        //disables or enables the button
        var cd = true;

        //disables button for a timer
        var timer = 0;
        for (timer = 0; timer < 9999; timer += 0.5){

            if (timer === 9998.5){
                cd = false;
            } else {
                cd = true;
            }
            console.log(cd)
            console.log(timer)
        }
        //enables and disables buttons depending on value of cd
        if (cd === true){
            x = document.getElementById("buttonID").disabled = true;
            y = document.getElementById("buttonID").innerText = "Disabled"


        } else{
            x = document.getElementById("buttonID").disabled = false;
            y = document.getElementById("buttonID").innerText = "Enabled"
        }
    }

</script>
</body>
</html>

【讨论】：