基于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 相关文章推荐
二级域名转向类
Nov 09 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
Javascript基础教程之变量
Jan 18 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
类和原型的设计模式之复制与委托差异
Jul 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
JS的replace方法介绍
2012/10/20 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
vue的mixins属性详解
2018/03/14 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
python with (as)语句实例详解
2020/02/04 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
端午节活动总结
2014/08/26 职场文书
挂职学习心得体会
2014/09/09 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
退休欢送会主持词
2015/07/01 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
Python中的变量与常量
2021/11/11 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript