一个切换名言的页面（json）

这个页面是在freecodecamp上刷题的时候要做的一个页面，只是例子用的是jquery,名言可以在线获取的。

而我的就不行了，是用js写的，名言也是用json格式存储的。只是做了那样的效果。

废话不多说，先看效果图。

左下角的图标是twitter的链接，点击新的名言，会生成一个新的名言，有可能不会。。。等下会说到。

好了，效果是这样，那有哪几步呢？

1.做好布局

2.写button的点击事件

布局我就不多说了，比较简单。想说一下的是这两个图标，用的是fontawesome里的两个图标，个人感觉比较好用。

接下来就是button的点击事件，要做到点击后切换新的名言，随机新的颜色。

切换新的名言，因为还不懂怎么在线引用的，所以我用json存储了名言与作者，点击的时候，生成一个随机数.....所以

这是导致有时可能它又随机到原理的那一条，于是名言没有变，这时，你只要多点几次>>>>>我只存了三条名言。

不过，颜色有12种，所以颜色不大可能连续两次都是同一种，所以你有时会看到颜色变了，名言没有变。

具体的操作就是，点击时，随机生成一个数，通过下标改变颜色、名言。

具体的看代码吧，我写了注释。

css

<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0\css\font-awesome.min.css"><style>#box{  padding:0;  width:450px;  margin:10% auto auto auto;  background-color:#fff;}#quote{  padding:40px 50px;  text-align:center;}#author{  text-align:right;  padding-right:50px;  padding-bottom:12px;}.button{  padding:6px;  color:white;  margin:0px 50px;  margin-bottom:25px;  background-color:#333;  border:none;  display:inline-block;  border-radius:4px;  }.button1{  margin-left:40px;  padding:8px 12px;}.button2{  font-size:16px;  float:right;}footer{  text-align:center;  color:white;  margin-top:2%;}body{  color:red;}</style>

body

<div id="box">  <div id="quote"><i class="fa fa-quote-left"></i><span id="quote-text"></span>  </div>  <div id="author">- <span id="author-text">我就是作者</span>  </div>  <div id="buttons"><button class="button button1">  <i class="fa fa-tumblr"></i></button><button class="button button2" id="newquote">新的名言</button>  </div></div><footer>by natural_live</footer>

JS

<script>//获取节点var text=document.getElementById("quote-text");var author=document.getElementById("author-text");var newquote=document.getElementById("newquote");var button1=document.getElementsByClassName("button1");//获取第一个button，通过类名。var text1="";var author1="";var colors=['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];//定义了一组颜色var json1 = [//定义了一个json数组  {  "text":"真理惟一可靠的标准就是永远自相符合。",  "author":"欧文",  }, {  "text":"时间是一切财富中最宝贵的财富。",  "author":"德奥弗拉斯多", }, {  "text":"这世界要是没有爱情，它在我们心中还会有什么意义！这就如一盏没有亮光的走马灯。",  "author":"歌德" }];window.onload=function(){//加载窗口触发事件  getnewquote();}newquote.onclick=getnewquote;//将button的onclick事件绑定一个函数function getnewquote(){//获取一句新的名言  var num=randomNum(0,colors.length);//获取随机的颜色  var num1=randomNum(0,json1.length);//获取随机的一句名言  var color=colors[num];  //改变body的背景色与元素的颜色  document.body.style.backgroundColor=color;  document.body.style.color=color;  //改变名言的颜色  document.getElementById("quote").style.color=color;  //改变新的名言的背景色  newquote.style.backgroundColor=color;    //改变第一个button的背景色  button1[0].style.backgroundColor=color;//将名言与作者更新成新的名言与作者  text.innerHTML=json1[num1].text;  author.innerHTML=json1[num1].author;  text1=json1[num1].text;  author1=json1[num1].author;  console.log(text1);}button1[0].onclick=openUrl;function openUrl(){//打开一个链接var url='https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + text1 + '" ' + author1);window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');}function randomNum(min,max){//获取一个在（min，max）之间的随机数return min+Math.floor(Math.random()*(max-min));}</script>