Random Quote Machine(格言随机生成器)

最新推荐文章于 2022-11-03 16:05:36 发布

原创最新推荐文章于 2022-11-03 16:05:36 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #API

Javascript 专栏收录该内容

6 篇文章

订阅专栏

使用Freecodecamp平台完成了一个格言生成器任务，通过调用API实现动态获取并显示随机格言，同时支持背景颜色变化等功能。

在Freecodecamp上面做到一个任务，要求是通过API来完成一个格言生成器。

但是在网上找了好多API都不能用，最后在一位博主的博客上面看到了一个API，亲测可用。

效果如下图所示（暂时分享功能还没写好）

查看演示：https://codepen.io/Maktub_/full/rJEReK

github: https://github.com/zxy1029/Random-Quote-Machine

HTML代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container-fluid">
  <div class="card">
    <div id="text">
      <i class="fa fa-quote-left"></i>
      <span id="txt"> Mother of mercy, is this the end of Rico?</span> 
      <div class="text-author">
        <span id="author">Henry Ford</span>
      </div>
    </div>
    <div class="button">
      <a href="https://github.com/zxy1029" class="btn"><i class="fa fa-github"></i></a>
      <a href="" class="btn"><i class="fa fa-share-alt"></i></i></a>
      <button class="btn" id="r-btn">New quote</button>
    </div>
  </div>
  <div class="footer">by
    <a href="https://codepen.io/dashboard/" class="me">zhang</a>
  </div>
</div>

CSS代码：

body {
  background-color: #16a085;
}
.card {
  width: 550px;
  margin: 8% auto auto auto;
  background-color: #FFF;
  border-radius: 3px;
  padding:40px 50px;
  border-style: none;
}
.footer {
  text-align: center;
  color: #fff;
}
.me {
  color: #FFF;
}
.fa-quote-left {
  color: #16a085;
}
.text-author {
  text-align: right;
  color: #16a085;
}
.button{
  margin-top:30px;
}
.btn {
  color: #FFF;
  font-size: 25px;
  background-color: #16a085;
}
#text {
  text-align:center;
  color: #000;
  font-size: 30px;
}
#txt{
  color: #16a085;
}
#r-btn {
  float: right;
}

JS代码

$(document).ready(function(){
  var colors = [ '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
  var i=0;
  $("#r-btn").click(function(){
    $("body").css({"background-color":colors[i%11]});
    $(".btn").css({"background-color":colors[i%11]});
    $("#txt").css({"color":colors[i%11]});
    $(".fa-quote-left").css({"color":colors[i%11]});
    $(".text-author").css({"color":colors[i%11]});
    i++;
    getQuote();
  });
  
  var content="";
    var author="";
    var getQuote = function(){
        $.getJSON("https://sslapi.hitokoto.cn/?encode=json",function(json){
            content = json["hitokoto"];
            author = json["from"];
            $("#txt").html(content);
            $("#author").html("-"+author);
        });
    }
});

由于还有很多功能还没有完善，以后还会继续改进。