最新下载
热门教程
- 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。
相关文章
- 《无限暖暖》天星之羽获得位置介绍 12-20
- 《流放之路2》重铸台解锁方法介绍 12-20
- 《无限暖暖》瞄准那个亮亮的成就怎么做 12-20
- 《无限暖暖》魔气怪终结者完成方法 12-20
- 《无限暖暖》曙光毛团获得位置介绍 12-20
- 《无限暖暖》日光果获得位置介绍 12-20