每次按下按钮时如何打开GIF

坦克

因此,一切正常(除了“ if”“ else”语句之外),每当我按下按钮时,它将返回或输出“情绪”(高兴,悲伤,共鸣失败)。但是我也希望,对于返回的每个“情感”,我也希望它也播放特定的GIF。不要判断哈哈,只是一个很小的小项目(因为我是编码的新手)。顺便说一句,它也适用于应用程序。

var adjective = ["Happy", "sad","vibe check failed", "yes","funny", "dumb", "Doot-Doot","Tik Tok","Amazing","horny" ] 
var list;

function generator() {
 document.getElementById("name").innerHTML = adjective[Math.floor(Math.random() * adjective.length)] + " "
}


//gif per vibe
if (document.getElementsByClassName("get-vibe-button").innerHTML === adjective[0]) {
    let url1 = "https://media.giphy.com/media/Lb4IZLmCfALhm/giphy.gif"
   url1.play()
   } else if (adjective  === adjective[1]){
       let url2 = "https://media.giphy.com/media/3o7aCV2Be0Cfk4H8nC/giphy.gif"
       console.log(url2)
   } else if (adjective  === adjective[2]){
   let url3 = "https://i.imgur.com/fBQFAPm.gif"
   console.log(url3)
   } else if (adjective  === adjective[3]) {
    let url4 = "https://media.giphy.com/media/WJjLyXCVvro2I/giphy.gif"
    console.log(url4)
   } else if (adjective  === adjective[4]){
       let url5 = "https://media.giphy.com/media/SggILpMXO7Xt6/giphy.gif"
       console.log(url5)
   } else if (adjective  === adjective[5]){
       let url6 = "https://media.giphy.com/media/24FMDDRwtF4uaMTmEQ/giphy.gif"
       console.log(url6)
   } else if (adjective === adjective[6]) {
       let url7 = "https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif"
       console.log(url7)
   } else if (adjective  === adjective[7]) {
       let url8 = "https://media.giphy.com/media/WQrVVyPi3qxVSqqyLi/giphy.gif"
       console.log(url8)
   } else if (adjective  === adjective[8]){
       let url9 = "https://media.giphy.com/media/zz00w5nNFMnPq/giphy.gif"
       console.log(url9)
   } else if (adjective === adjective[9]){
       let url10 = "https://media.giphy.com/media/wCSGHsoNgtDa0/giphy.gif"
       console.log(url10)
   }
<!DOCTYPE html>
<html>
<head>
</head>
<style>
.vibe-check-heading{
    background-color: rgb(98, 211, 255);
    font-size: 20px;
    font-family: Comfortaa;
    padding: 10rem;
}

.get-vibe-button{
    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%;

}

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

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

}

</style>

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<script src = "vibe check script.js"> </script>

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

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

<div class="vibing">

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


  
  <div class ="gif-placer">

</div>


</body>
</html>

Jaromanda X

为了使它起作用,需要进行许多更改-但您可以在这里

var adjectives = ["Happy", "sad", "vibe check failed", "yes", "funny", "dumb", "Doot-Doot", "Tik Tok", "Amazing", "horny"];
var gifs = [
  "https://media.giphy.com/media/Lb4IZLmCfALhm/giphy.gif",
  "https://media.giphy.com/media/3o7aCV2Be0Cfk4H8nC/giphy.gif",
  "https://i.imgur.com/fBQFAPm.gif",
  "https://media.giphy.com/media/WJjLyXCVvro2I/giphy.gif",
  "https://media.giphy.com/media/SggILpMXO7Xt6/giphy.gif",
  "https://media.giphy.com/media/24FMDDRwtF4uaMTmEQ/giphy.gif",
  "https://media.giphy.com/media/5MxvgLxp5p732/giphy.gif",
  "https://media.giphy.com/media/WQrVVyPi3qxVSqqyLi/giphy.gif",
  "https://media.giphy.com/media/zz00w5nNFMnPq/giphy.gif",
  "https://media.giphy.com/media/wCSGHsoNgtDa0/giphy.gif"
];

function generator() {
  var index = Math.floor(Math.random() * adjectives.length);
  document.getElementById("name").innerHTML = adjectives[index] + " ";
  document.getElementById("gif").src = gifs[index];
}
.vibe-check-heading {
  background-color: rgb(98, 211, 255);
  font-size: 20px;
  font-family: Comfortaa;
  padding: 10rem;
}

.get-vibe-button {
  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%;
}

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

.instructions {
  font-size: 15px;
  font-family: Comfortaa;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Comfortaa" />
<script src="vibe check script.js">
</script>
<div>
  <h1 class="Vibe-Check-heading">
    Vibe Check
  </h1>
</div>
<div class="instructions">
  <h2>
    Instructions: Just click the button loser.
  </h2>
</div>
<div class="vibing">

  <button onclick="generator()" class="get-vibe-button">The Vibe is</button>
  <h1 class="jumbotron text-center rokkitt" id="name"></h1>
</div>
<div class="gif-placer">
  <img id="gif" />
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

每次用户按下按钮时如何进行迭代?

每次按下按钮时,如何使scrollView移动?

每次按下按钮时如何停止面板加载

每次按下按钮时重复声音

如何在本地按下按钮时打开键盘?

每次使用android studio按下按钮时,如何让1个按钮播放随机声音

按下按钮时打开链接

每次按下按钮时更改按钮颜色 kivy

如何创建一个循环来在每次按下按钮时指定不同的动作?

每次按下“ WPF Animmation”按钮时,我如何重播相同的动画

如何获得一个UI按钮,使其在每次按下时执行不同的任务?

每次按下按钮时如何创建克里特岛新文件?

每次在tkinter中按下按钮时,如何获得不同的标签值?

每次按下按钮时如何在屏幕上向上移动文本

每次按下按钮时如何进行v-card的展开过渡

每次按下按钮时如何播放声音而不会冻结Tkinter

android-如何使按钮单击在每次按下时播放声音文件?

如何使动作按钮仅在每次按下时才起作用?

每次按下按钮时,如何在文本文件中打印新行?

如何在 micropython 中通过每次按下按钮时增加 5 秒来点亮 LED

[PyQt]每次按下按钮时打开第二个窗口而不关闭程序

Android:在Java中按下时如何停止gif图像按钮的动画?

如何在kivy中按下按钮时播放的动画gif?

每次按下按钮时 JavaScript 递增和递减

Java-每次按下按钮时遍历数组

按下按钮时gif无法播放PyQt5

按下屏幕上的按钮时,如何使用menuInflator打开菜单?

如何避免在 react.js 中按下按钮时打开所有弹出窗口?

ANDROID-如何在android中按下按钮时打开相机?