首页 > 网站 > WEB开发 > 正文

基于JQuery及AJAX(JSONP)的名人名言随机生成器

2024-04-27 15:19:35
字体:
来源:转载
供稿:网友

这是我刚接触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" 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。


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