随机图像生成器项目（Javascript）

约翰·G。

在完成 FreeCodeCamp 的一个项目时，我有一个想法，即创建一个简单的网站，当我按下按钮时，它可以让我随机获得一只猫的图片。所以我找到了http://thecatapi.com/，它会给我一个随机的 src，所以我可以将它添加到我的 img 标签中。我用 jQuery 做了这个，因为我来自 FCC 更容易。

由于 api 会为我提供随机源 url，我认为这并不困难，但是使用我实现的代码，请求猫的按钮仅在第一次单击时起作用。

这是我的 HTML

<img class="img-fluid" src="" id="kitties">
<div class="catText"> <h1>Your cat will spawn here!</h1></div>

<div class="buttons text-center">
   <a class="btn btn-info" target="_blank" id="tweetButton">Tweet it!</a>
   <button class="btn btn-secondary" id="kittyButton"> Generate </button>
</div>

还有我的 Javascript

$(document).ready(function() {
   $("#kittyButton").on("click", function(){
      $('.catText').remove();
      $("#kitties").attr('src','http://thecatapi.com/api/images/get')
   });
});

每次单击按钮时如何获得不同的图像？

提前致谢，您可以在我的 codepen 中看到整个代码就在这里

Hiteshdua1

更新代码笔：https ://codepen.io/anon/pen/vrNYey ? editors = 1010

更新您的代码以在字符串末尾添加随机数以避免browser caching，请参阅：https : //developer.mozilla.org/en-US/docs/Web/HTTP/Caching

 var rnd = new Date().getTime();

上面的代码会得到EPOC时间，每次请求都是唯一的

$(document).ready(function() {
$("#kittyButton").on("click", function(){
   $('.catText').remove();
 var rnd = new Date().getTime();

$("#kitties").attr('src','http://thecatapi.com/api/images/get?format=src&type=jpg,png?'+rnd)
// $('#tweetButton').attr('href', 'https://twitter.com/intent/tweet?text=' +('"'+HOAAAAAAAA+'"'+"  - "+GATITAAAAAAA));
      }); 
});

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

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