<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Random Quote Machine</title>
<style>
body{
background-color: red;
}
.main{
background-color: white;
max-width: 600px;
min-height: 100px;
margin: 0 auto;
position: relative;
}
.content{
color: red;
font-size: 30px;
text-align: center;
position: relative;
top: 20px;
}
.writer{
color: red;
text-align: right;
margin-right: 20px;
/*position: relative;*/
/*right: 20px;*/
}
.btn{
background-color: red;
color: white;
width: 120px;
height: 40px;
font-size: 15px;
margin-left: 460px;
margin-bottom: 20px;
/*position: absolute;*/
/*right: 20px;*/
/*bottom: 20px;*/
}
</style>
<script type="text/javascript">
window.onload = function () {
document.getElementsByClassName("content")[0].innerHTML = "I can fly";
document.getElementsByClassName("writer")[0].innerHTML = "LPD";
changeContent();
}
var xmlhttp;
function netWork(url,cfunc) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.setRequestHeader('X-Mashape-Key','OivH71yd3tmshl9YKzFH7BTzBVRQp1RaKLajsnafgL2aPsfP9V');
xmlhttp.send();
}
function changeContent() {
netWork("https://andruxnet-random-famous-quotes.p.mashape.com/cat=",function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var result = JSON.parse(xmlhttp.responseText);
var main = document.getElementsByClassName("main")[0];
// if (result.quote.length > 45){
//
// main.style.minHeight = 400 + "px";
//
//
// }else {
//
// main.style.minHeight = 200 + "px";
// }
//改变颜色
var color = "#" + randomNum();
document.getElementsByClassName("content")[0].style.color = color;
document.getElementsByClassName("writer")[0].style.color = color;
document.getElementsByClassName("btn")[0].style.backgroundColor = color;
document.getElementsByTagName("body")[0].style.backgroundColor = color;
document.getElementsByClassName("content")[0].innerHTML = result.quote;
document.getElementsByClassName("writer")[0].innerHTML = result.author;
}
})
}
//产生随机数
function randomNum() {
var rnd = "";
for(var i=0;i<6;i++){
rnd += Math.floor(Math.random()*10);
}
return rnd;
}
function goto() {
window.location.href = 'home_vue.html';
}
</script>
</head>
<body>
<div class="main">
<p class="content"></p>
<p class="writer"></p>
<button class="btn" type="button" onclick="changeContent()">New Quote</button>
</div>
</body>
</html>
网友评论