最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
基于JQuery及AJAX实现名人名言随机生成器
时间:2022-06-25 17:15:45 编辑:袖梨 来源:一聚教程网
这是我刚接触AJAX的时候做的一个小应用,主要功能如下:
1.点击按钮可以随机生成一句名人名言及其作者名字,如果没有作者名字,则显示“Unknown”。
2.点击按钮可以把名人名言分享到推特或者微博。
HTML:
代码如下 | 复制代码 |
Random Quote Generator
Tweet
Get Quote
Designed by Alen Hu
|
JQuery:
代码如下 | 复制代码 |
$(document).ready(function() { varquote, author;
functiongetNewQuote() { $.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。
相关文章
- 《原神》5.2卡池抽取建议 11-14
- 《原神》5.2版本新怪物介绍 11-14
- 《原神》希诺宁增伤触发方法 11-14
- 《原神》循音觅奇活动入口 11-14
- 《原神》循音觅奇兑换码获取方法 11-14
- 《原神》花羽会活动飞行技巧介绍 11-14