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


Posted in Javascript onFebruary 10, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
JS验证不重复验证码
Feb 10 #Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
You might like
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
javascript 写类方式之八
2009/07/05 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
JS call()及apply()方法使用实例汇总
2020/07/11 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python中的闭包实例详解
2014/08/29 Python
详解Python中的join()函数的用法
2015/04/07 Python
浅析python中的分片与截断序列
2016/08/09 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
妇产科护士自我鉴定
2013/10/15 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
法制宣传标语集锦
2014/06/25 职场文书
汽车转让协议书范本
2014/12/07 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
员工家属慰问信
2015/03/24 职场文书
任命书格式范文
2015/09/22 职场文书
品德与社会教学反思
2016/02/24 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python