随机格言生成器（Random Quote Machine）的制作

这是freecodecamp上的一个项目，本来挺简单的，但是格言的免费api不好找，先找到一个国外的，却是搞出了跨域访问的问题，搞了半天没解决，然后想到了“一言”，下面便是用“一言”的api制作的随机格言生成器。

功能要求：点击能够按钮获取一条随机格言，并获取作者，同时能够进行分享。在这里的分享就是分享到QQ空间（分享到QQ个人的链接好像挂了，我试了一些大型网站的也分享不了）

先上图：

获取格言数据就是简单的调用api，核心代码如下：

var getQuote = function(){$.getJSON("https://sslapi.hitokoto.cn/?encode=json",function(json){content = json["hitokoto"];   //获取格言内容author = json["from"];            //获取格言作者$(".quote-content").html(content);$(".quote-author").html("——"+author);});}

还有点击分享的代码，这个更简单，直接打开分享网站，不过得自己传一些参数：

下面是引用自 http://www.cnblogs.com/buhuixiedaima/p/5062680.html

http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=分享的网址
&desc=默认分享理由(可选)
&summary=分享摘要(可选)
&title=分享标题(可选)
&site=分享来源 如：腾讯网(可选)
&pics=分享图片的路径(可选)

查看演示：https://codepen.io/yinyoupoet/pen/OgqpPJ
不过由于codepen的一些未知原因在这里面点击分享会有问题，但是如果将链接复制一下在新窗口打开就正确了。

下面是完整代码：

html

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Quote</title><link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"></head><body><div class="container-fluid content"><div class="quote"><i class="fa fa-quote-left" aria-hidden="true"></i><p class="quote-content">Blessed is the man, who having nothing to say, abstains from giving wordy evidence of the fact.</p></div><br><div class="author"><p class="quote-author">——Paul Erdos</p><i class="fa fa-quote-right" aria-hidden="true"></i></div><div class="addition"><center><button class="btn btn-primary btn_next" onmouseover="this.style.background='#096148';this.style.color='#fff'" onmouseout="this.style.background='rgb(39,147,96)'">Next Quote</button></center><div class="share"><a href="#" ><i class="fa fa-qq shareQQ" aria-hidden="true"></i></a></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="js/index.js"></script></body>
</html>

css

*{margin: 0;padding:0;
}
body{background: url("https://images.unsplash.com/photo-1490598000245-075175152d25?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=") no-repeat center center fixed;background-size: cover;
}.content{position: relative;margin: 8% auto auto auto;width: 40%;padding:40px 50px;border-radius: 20px;background: rgba(255,255,255,0.6);  /*背景透明而上面的内容不透明*/}.quote i{font-size: 4em;color: rgb(39,174,96);
}.quote-content{display: inline;font-size: 2em;color: rgb(39,174,96);
}.author{position: relative;text-align: right;color: rgb(39,174,96);
}.author i{font-size: 4em;color: rgb(39,174,96);
}.quote-author{font-size: 1.5em;display: inline;
}.addition{width: 100%;position: relative;
}
.addition center{position: relative;
}.btn_next{padding:5px 10px;font-size: 1.5em;color: #fff;background: rgb(39,174,96);border: 0;
}
.btn_next:blur{color: #fff;
}.addition .shareQQ{position: relative;color: #ccc;font-size: 2em;
}
.addition .shareQQ:hover{color: rgb(39,174,96);}
.addition a{position: relative;text-align: right;
}
.share{position: relative;text-align: right;
}
/*背景透明，字体不透明，兼容 IE6/7/8  参考网址：http://www.cnblogs.com/PeunZhang/p/4089894.html*/
@media \0screen\,screen\9{/*只支持IE6/7/8*/.content{background-color: #fff;filter:Alpha(opacity=50);position: static;/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */}/*必须设置为relative，这样可以使它内容不透明*/.content .quote{position: relative;}.content .author{position: relative;}
}

$(document).ready(function(){$(".btn_next").mouseup(function(){$(".btn_next").css("border","0");$(".btn_next").css("color","#fff");$(".btn_next").css("border",0);});$(".btn_next").mousedown(function(){$(".btn_next").css("border-color","#096148");$(".btn_next").css("color","#66bab7");$(".btn_next").css("border",0);});//调用一言api$(".btn_next").on("click",function(){getQuote();});var content="Blessed is the man, who having nothing to say, abstains from giving wordy evidence of the fact.";var author="Paul Erdos";var getQuote = function(){$.getJSON("https://sslapi.hitokoto.cn/?encode=json",function(json){content = json["hitokoto"];author = json["from"];//console.log(content+"_"+author);$(".quote-content").html(content);$(".quote-author").html("——"+author);});}getQuote();$(".shareQQ").on("click",function(){console.log(content+author);window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://www.baidu.com&desc='+content+'——'+author+'&title=吟游佳句&summary=我发现了一句很漂亮的话，快来看看吧&pics=&site=bshare');});});

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet

随机格言生成器（Random Quote Machine）的制作相关推荐

Machine Learning | (8) Scikit-learn的分类器算法-随机森林（Random Forest）
Machine Learning | 机器学习简介 Machine Learning | (1) Scikit-learn与特征工程 Machine Learning | (2) sklearn数据集 ...
随机数字生成器（Random Number Generation）看这一篇就够了！
伪随机数作为utils包的一部分,Java提供了一个基本的伪随机数生成器,适当地命名为random.该对象可用于生成任意内置数字数据类型(int.float等)的伪随机值.您也可以使用它来生成一个随 ...
今天吃什么？我直接用Python制作随机食物生成器
前言咳咳,今天中午吃什么啊,今天晚上吃啥,emm夜宵吃啥不知道你们每天有没有问过这些问些问题,我基本上天天问,问完后想吃这个又想吃那个,纠结的要命,还不如搞个随机食物生成器有些朋友就说了,这种东 ...
[Machine Learning Algorithm] 随机森林（Random Forest）
1 什么是随机森林? 作为新兴起的.高度灵活的一种机器学习算法,随机森林(Random Forest,简称RF)拥有广泛的应用前景,从市场营销到医疗保健保险,既可以用来做市场营销模拟的建模,统计客户来 ...
unity3d 随机物体生成器工具
根据输入的物体生成随机成组的物体. 1 /// <summary> 2 /// 本脚本可以由输入的预制生成以本物体为中心的随机预制,支持预制打组 3 /// 随机物体生成器(尤其试用于场 ...
python随机数列_Python2随机数列生成器简单实例
本文实例讲述了Python2随机数列生成器.分享给大家供大家参考,具体如下: #filename:randNumber.py import random while True: try: row=in ...
用python做一个随机题目生成器
你好! 要用 Python 做一个随机题目生成器,你可以使用 Python 的 random 模块来生成随机数. 下面是一个简单的例子,它会生成一道加法题: import random# 生成两个随机 ...
随机森林实例：利用基于CART算法的随机森林（Random Forest）树分类方法对于红酒质量进行预测
随机森林实例:利用基于CART算法的随机森林(Random Forest)树分类方法对于红酒质量进行预测 1.引言 2.理论基础 2.1 什么是决策树 2.2 特征选择的算法 2.2.1 ID3:基于 ...
python的英文单词表_随机单词生成器 - Python
所以我基本上是在一个项目中,计算机从单词列表中抽出一个单词,并为用户乱七八糟.只有一个问题:我不想不断地在列表中写很多单词,所以我想知道是否有一种方法可以导入大量的随机单词,所以即使我不知道它是什么, ...

随机格言生成器（Random Quote Machine）的制作

随机格言生成器（Random Quote Machine）的制作相关推荐

最新文章

热门文章