基于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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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的输入输出流
2007/02/14 PHP
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
js实现日历
2020/11/07 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python内建模块struct实例详解
2018/02/02 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python实现单链表的方法示例
2019/09/03 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
中学教师请假制度
2014/02/03 职场文书
社区服务活动总结
2014/05/07 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书