基于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函数
Apr 09 Javascript
JavaScript 无符号右移赋值操作
Apr 17 Javascript
js控制滚动条缓慢滚动到顶部实现代码
Mar 20 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 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
长波知识介绍
2021/03/01 无线电
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
隐性调用php程序的方法
2009/03/09 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP7 新增常量
2021/03/09 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
详解React 条件渲染
2020/07/08 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Django 限制访问频率的思路详解
2019/12/24 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
荷兰本土平价百货:HEMA
2017/10/23 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
水电工岗位职责
2014/02/12 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
拿破仑传读书笔记
2015/07/01 职场文书