基于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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
js中arguments的用法(实例讲解)
Nov 30 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
js实现上传图片预览方法
Oct 25 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
H5移动端图片压缩上传开发流程
Nov 09 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 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
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
python关键字and和or用法实例
2015/05/28 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python探索之pLSA实现代码
2017/10/25 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python实现词法分析器
2019/01/31 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python实现微信机器人的方法
2019/09/06 Python
Python JSON编解码方式原理详解
2020/01/20 Python
python手写均值滤波
2020/02/19 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
linux系统都有哪些运行级别
2016/03/26 面试题
无故旷工检讨书
2014/01/26 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
学校教研活动总结
2014/07/02 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
小学优秀学生评语
2014/12/29 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
公司员工奖惩制度
2015/08/04 职场文书
小学副班长竞选稿
2015/11/21 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
七年级英语教学反思
2016/02/15 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
Golang bufio详细讲解
2022/04/21 Golang