Show random quotes using "Random Famous Quotes" API (https://www.mashape.com/andruxnet/random-famous-quotes)
Forked from Gabriel Nunes's Pen Random Quote Machine.
Forked from Free Code Camp's Pen Random Quote Machine.
Forked from Free Code Camp's Pen FreeCodeCamp : Random Quote Machine.
| <!--了解实现--> | |
| <!--1.我们能够直观感受到的是这个页面中切换新的quote之后，字体的颜色，背景的颜色，分享图标的颜色都是一致的，而且也都一致地发生改变--> | |
| <!--2. 页面加载完成之后自动就展示一个quote，之后每点击一次new quote，新加载一个quote，而不是像我自己做的那样，页面加载完是没有quote的，要点击quote才能够加载--> | |
| <div class="quote-box"> | |
| <div class="quote-text"> | |
| <i class="fa fa-quote-left"> | |
| <!--上面用到了bootstrap，这个i标签可以产生一个bootstrap的左边引号，这个是我能够想到的，在我的使用中，还使用到了fa-quote-right ,而在这里作者显然只用到了left--> | |
| </i> | |
| <span id="text"></span> | |
| </div> | |
| <!--下面的div将显示引文作者信息，动态的内容通过JS填充到span内部--> | |
| <div class="quote-author"> | |
| - <span id="author"></span> | |
| </div> | |
| <div class="buttons"> | |
| <!--分享按钮--> | |
| <a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank"> | |
| <i class="fa fa-twitter"></i> | |
| </a> | |
| <!--twitter分享结束--> | |
| <a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank"> | |
| <i class="fa fa-tumblr"></i> | |
| </a> | |
| <!--tumblr分享结束--> | |
| <!--new quote按钮--> | |
| <button class="button" id="new-quote">New quote</button> | |
| </div> | |
| <!--button结束--> | |
| </div> | |
| <!--quote box结束--> | |
| <!--页面底部的标注--> | |
| <div class="footer"> by <a href="https://codepen.io/hezag/">hezag</a></div> | |
| <!--从这个页面也可以来学习页面的布局--> |
| /* | |
| Code by Gabriel Nunes | |
| 用到了jQuery UI框架，这里要了解。 | |
| */ | |
| function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } } | |
| /* | |
| window.self | |
| 功能：是对当前窗口自身的引用。它和window属性是等价的。 | |
| 语法：window.self | |
| 注：window、self、window.self是等价的。 | |
| window.top | |
| 功能：返回顶层窗口，即浏览器窗口。 | |
| 语法：window.top | |
| 注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。 | |
| window.parent | |
| 功能：返回父窗口。 | |
| 语法：window.parent | |
| 注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。 | |
| 在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。 | |
| 判断当前窗口是否在一个框架中： | |
| <script type="text/javascript"> | |
| var b = window.top!=window.self; | |
| document.write( "当前窗口是否在一个框架中："+b ); | |
| </script> | |
| 上面的程序显然是判断当前窗口是否在该框架中了。 | |
| 使用框架的好处是可以在一个浏览器窗口中显示多个webpage。 | |
| */ | |
| var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"]; | |
| //定义定义了12种颜色 | |
| var currentQuote = '', currentAuthor = ''; | |
| //定义了当前引语和当期当前当前作者两个字符串 | |
| function openURL(url){ | |
| window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0'); | |
| } | |
| //定义了一个函数，用于打开URL | |
| function getQuote() { | |
| $.ajax({ | |
| headers: { | |
| "X-Mashape-Key": "OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V", | |
| Accept: "application/json", | |
| "Content-Type": "application/x-www-form-urlencoded" | |
| }, | |
| url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=', | |
| success: function(response) { | |
| var r = JSON.parse(response); | |
| currentQuote = r.quote; | |
| currentAuthor = r.author; | |
| if(inIframe()) | |
| { | |
| $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor)); | |
| /* | |
| jQuery中的attr（）方法可以用来改变属性值，这里的attr也就是attribute了，在这里href算是tweet-quote这个id的一个属性，因此可以进行改变。我在之前的程序中，就是这里出了问题，不会让这个内容动态变化。另外需要注意encodeURIComponent这个方法的使用，他能够将中文、韩文等特殊字符转换成utf-8格式的url编码，所以如果给后台传递参数需要使用encodeURIComponent时需要后台解码对utf-8支持（form中的编码方式和当前页面编码方式相同） | |
| */ | |
| $('#tumblr-quote').attr('href', 'https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption='+encodeURIComponent(currentAuthor)+'&content=' + encodeURIComponent(currentQuote)); | |
| } | |
| //下面的animate()方法的主要作用是可以设//置动画效果。在这里可以看到是对引文部分设置动画//效果。 | |
| $(".quote-text").animate({ | |
| opacity: 0 | |
| }, 500, | |
| function() { | |
| $(this).animate({ | |
| opacity: 1 | |
| }, 500); | |
| $('#text').text(r.quote); | |
| }); | |
| $(".quote-author").animate({ | |
| opacity: 0 | |
| }, 500, | |
| function() { | |
| $(this).animate({ | |
| opacity: 1 | |
| }, 500); | |
| $('#author').html(r.author); | |
| }); | |
| var color = Math.floor(Math.random() * colors.length); | |
| $("html body").animate({ | |
| backgroundColor: colors[color], | |
| color: colors[color] | |
| }, 1000); | |
| $(".button").animate({ | |
| backgroundColor: colors[color] | |
| }, 1000); | |
| } | |
| }); | |
| } | |
| $(document).ready(function() { | |
| getQuote(); | |
| $('#new-quote').on('click', getQuote); | |
| $('#tweet-quote').on('click', function() { | |
| if(!inIframe()) { | |
| openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor)); | |
| } | |
| }); | |
| $('#tumblr-quote').on('click', function() { | |
| if(!inIframe()) { | |
| openURL('https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption='+encodeURIComponent(currentAuthor)+'&content=' + encodeURIComponent(currentQuote)); | |
| } | |
| }); | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
| @import url(https://fonts.googleapis.com/css?family=Raleway:400,500); | |
| //google font | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| vertical-align: baseline; | |
| } | |
| div { | |
| position:relative; //相对位置 | |
| z-index: 2; //这里是设置堆叠顺序，所以界面跟有层次感 | |
| } | |
| body { | |
| background-color: #333; | |
| color: #333; | |
| font-family: 'Raleway', sans-serif; | |
| font-weight:400; | |
| } | |
| .footer { | |
| width:450px; | |
| text-align:center; | |
| display:block; | |
| margin:15px auto 30px auto; | |
| font-size:1em; //字体的大小 | |
| color:#fff; //脚注字体颜色白色不变 | |
| a { | |
| font-weight:500; | |
| text-decoration:none; | |
| color:#fff; | |
| } | |
| } | |
| .quote-box { | |
| border-radius:10px;//这里是设置div框的外围半径，让这个框不是死板的矩形。 | |
| position:relative; | |
| margin:8%auto;//这一行是来控制这个box的位置的，如果去掉了这一行，就不是居中了。当然，8%是指这个box到这个div顶部的距离，其他三个如果是auto则默认是居中的 | |
| width:450px;//这里将这个box的宽度固定，而高度不固定，随着引文的不同而发生变化。 | |
| padding:40px，50px; | |
| display:table; | |
| background-color:#fff; //这个颜色会随之改变 | |
| .quote-text { | |
| i{ | |
| font-size:1.0em; | |
| margin-right: 0.4em; | |
| } | |
| text-align:center; | |
| width:450px; | |
| height:auto; | |
| clear:both; | |
| //clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 | |
| font-weight:500; | |
| font-size:1.75em; | |
| } | |
| .quote-author { | |
| width:450px;//可以看到这里这几个对div或者其他的css的设置，宽度一律保持为450px，这样也保证了统一，效果就是能够更加紧凑。 | |
| height:auto; | |
| clear:both; | |
| padding-top:20px;//与上面引文的间隔 | |
| font-size:1em; | |
| text-align:right;//右对齐，这肯定也是必须的啦 | |
| } | |
| .buttons { | |
| width:450px; | |
| margin:auto; | |
| display:block; | |
| //注意这样的CSS写法，对于.buttons的定义里面还是可以放入.button的，因为本身.button这个类就在div=buttons这个里面 | |
| .button { | |
| //分享按钮，twitter和tumblr的形状 | |
| height:38px; | |
| border-radius:3px; | |
| color:#fff; //可以看到还是统一的FFF，这样改变起来统一改变 | |
| background-color:#333; | |
| outline:none; | |
| font-size:0.85em; | |
| padding: 8px 18px 6px 18px; | |
| margin-top:30px; | |
| opacity:1; | |
| cursor:pointer; | |
| &:hover { //鼠标光标悬浮在其上时的情况 | |
| opacity:0.9; //表示不透明度为0.9 | |
| } | |
| &#tweet-quote, &#tumblr-quote { | |
| float:left; | |
| //如果在这里使用clear:both;那么就会让这里的图标排成两排而不是一排了。 | |
| padding:0px; | |
| padding-top:8px; | |
| text-align:center; | |
| font-size:1.2em; | |
| margin-right:5px; | |
| height:30px; | |
| width:40px; | |
| } | |
| &#new-quote { | |
| float:right; | |
| } | |
| } | |
| } | |
| } |
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> |