首页 > 编程 > JavaScript > 正文

基于JQuery及AJAX实现名人名言随机生成器

2019-11-19 17:38:55
字体:
来源:转载
供稿:网友

这是我刚接触AJAX的时候做的一个小应用,主要功能如下:

1.点击按钮可以随机生成一句名人名言及其作者名字,如果没有作者名字,则显示“Unknown”。
2.点击按钮可以把名人名言分享到推特或者微博。

HTML:

<div class="container-fluid text-center">  <h1>   Random Quote Generator  </h1>  <div class="well quote-area">   <span class="quote">   </span>   <span class="author">   </span>  </div>  <div class="btns">   <button class="btn btn-default btn-lg" id="tweet">    <i class="fa fa-twitter" aria-hidden="true">    </i>     Tweet   </button>   <button class="btn btn-default btn-lg" id="weibo">    <i class="fa fa-weibo" aria-hidden="true">    </i>     Weibo   </button>   <button class="btn btn-default btn-lg" id="change">    <i class="fa fa-exchange" aria-hidden="true">    </i>     Get Quote   </button>  </div> </div> <footer class="text-center">  Designed by  <a href="http://blog.csdn.net/alenhhy" rel="external nofollow" target="_blank">   Alen Hu  </a> </footer> 

JQuery:

$(document).ready(function() {  var quote, author;   function getNewQuote() {   $.ajax({    type: "get",    url: "http://api.forismatic.com/api/1.0/",    jsonp: 'jsonp',    dataType: 'jsonp',    data: {     method: 'getQuote',     lang: 'en',     format: 'jsonp'    },    success: function(response) {     quote = response.quoteText;     author = response.quoteAuthor;     $('.quote').text('/"' + quote + '/"');     if (author) {      $('.author').text('by ' + author);     } else {      $('.author').text('by Unknown');     }    }   });  }   getNewQuote();   $('#change').on('click',  function(event) {   event.preventDefault();   getNewQuote();  });   $('#tweet').on('click',  function(event) {   event.preventDefault();   window.open('http://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + ' by ' + author));  });   $('#weibo').on('click',  function(event) {   event.preventDefault();   window.open('http://v.t.sina.com.cn/share/share.php?title=' + encodeURIComponent(quote + ' by ' + author));  }) }); 

*forismatic的API可以获取名人名言,但是只有英语和俄语版本的...不过中文类似的API也有很多的啦,实现原理都差不多。

DEMO在这儿,欢迎来FORK:Random Quote Generator

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表