欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器

 更新時(shí)間:2017年02月10日 10:41:40   作者:alenhhy  
這篇文章主要為大家詳細(xì)介紹了基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

這是我剛接觸AJAX的時(shí)候做的一個(gè)小應(yīng)用,主要功能如下:

1.點(diǎn)擊按鈕可以隨機(jī)生成一句名人名言及其作者名字,如果沒有作者名字,則顯示“Unknown”。
2.點(diǎn)擊按鈕可以把名人名言分享到推特或者微博。

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  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可以獲取名人名言,但是只有英語(yǔ)和俄語(yǔ)版本的...不過中文類似的API也有很多的啦,實(shí)現(xiàn)原理都差不多。

DEMO在這兒,歡迎來FORK:Random Quote Generator

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 取選中的radio的值

    取選中的radio的值

    取選中的radio的值
    2010-01-01
  • jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕效果

    jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • 利用jquery實(shí)現(xiàn)下拉框的禁用與啟用

    利用jquery實(shí)現(xiàn)下拉框的禁用與啟用

    本文主要介紹了jquery實(shí)現(xiàn)下拉框的禁用與啟用的具體代碼。代碼清晰,容易理解。有需要的朋友可以參考下,希望會(huì)對(duì)大家有所幫助
    2016-12-12
  • jQuery實(shí)現(xiàn)表格的增、刪、改操作示例

    jQuery實(shí)現(xiàn)表格的增、刪、改操作示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)表格的增、刪、改操作,涉及基于jQuery的事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-01-01
  • 使用JQuery實(shí)現(xiàn)的分頁(yè)插件分享

    使用JQuery實(shí)現(xiàn)的分頁(yè)插件分享

    本文給大家總結(jié)了幾種使用jQuery實(shí)現(xiàn)的分頁(yè)插件,效果非常不錯(cuò),有需要的小伙伴可以參考下。
    2015-11-11
  • jQuery增加自定義函數(shù)的方法

    jQuery增加自定義函數(shù)的方法

    這篇文章主要介紹了jQuery增加自定義函數(shù)的方法,通過簡(jiǎn)單的樣式添加為例分析了jquery增加自定義函數(shù)的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-07-07
  • EasyUI中在表單提交之前進(jìn)行驗(yàn)證

    EasyUI中在表單提交之前進(jìn)行驗(yàn)證

    這篇文章主要介紹了EasyUI中在表單提交之前進(jìn)行驗(yàn)證的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-07-07
  • 前端必備神器 Snap.svg 彈動(dòng)效果

    前端必備神器 Snap.svg 彈動(dòng)效果

    SVG(可縮放矢量圖形)是基于可擴(kuò)展標(biāo)記語(yǔ)言(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集),用于描述二維矢量圖形的一種圖形格式。它由萬(wàn)維網(wǎng)聯(lián)盟制定,是一個(gè)開放標(biāo)準(zhǔn)。
    2014-11-11
  • jQuery對(duì)下拉框,單選框,多選框的操作

    jQuery對(duì)下拉框,單選框,多選框的操作

    這篇文章主要介紹了jQuery對(duì)下拉框,單選框,多選框的操作需要的朋友可以過來參考下,希望對(duì)大家有所幫助
    2014-02-02
  • 用JQuery模仿淘寶的圖片放大鏡顯示效果

    用JQuery模仿淘寶的圖片放大鏡顯示效果

    相信大部分人都上過淘寶網(wǎng)吧,里面有個(gè)這個(gè)效果,當(dāng)鼠標(biāo)移動(dòng)到小圖上面,顯示大圖。
    2011-09-09

最新評(píng)論