Как добавить охлаждение к кнопке с несколькими функциями? - PullRequest
Новая
       8

Как добавить охлаждение к кнопке с несколькими функциями?

0 голосов
/ 23 марта 2020

Добавлена ​​только одна кнопка, и я хочу, чтобы при нажатии у нее было несколько функций. Функция 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>

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Вместо отключения вы можете использовать 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>
0 голосов
/ 23 марта 2020

Вы можете включать и отключать атрибут disable тега кнопки https://www.w3schools.com/jsref/prop_pushbutton_disabled.asp

Я использовал для l oop, чтобы установить таймер, и использовал логические значения для отключения и включить кнопку. Не стесняйтесь поиграть (по какой-то причине я не могу заставить y изменить внутренний текст кнопки для переключения между включенным и отключенным при необходимости, но это другая проблема для другого сообщения) 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...