FCC-----------Build a Random Quote Machine-优快云博客

本文链接：https://blog.youkuaiyun.com/tian_123456789/article/details/73912292

使用jQuery及API实现了一个能够随机生成并显示名言的网页应用，支持颜色动画效果及社交媒体分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jquery来实现一个能够随机生成短语的程序，能够在点击刷新按钮时就生成一条新的短语，点击twitter或者点击微博时，能够把生成的名言分享到twitter或者分享到微博上面。

在线演示：Build a Random Quote Machine

由于在编写时我用到了animate来改变字体和背景颜色，但是jquery本身的animate并不支持颜色的改变，所以我用到了jquery-color插件来改变颜色属性

jquery-color插件地址：jquery-color

下面是详细代码实现

基本布局实现代码 index.html, 其中字体使用的是Google的在线CDN，图标用的是iconfont

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Quote</title>
	<link rel="shortcut icon" href="./img/01.jpg">
	<link rel="stylesheet" type="text/css" href="./css/main.css">
	  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
	<script type="text/javascript" src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="./js/jquery-color.js"></script>	
	<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<div id="quote">
	<div class="quote-text">
		<span class="quote"></span>
		<span class="author"></span>
	</div>
	<div class="button">
		<div class="btn twitter"></div>
		<div class="btn weibo"></div>
		<div class="btn change"></div>
	</div>
</div>
</body>
</html>

样式布局代码 main.css

body{
			background-color: #ddd;

		}
		#quote{
			z-index: 2;
			width: 500px;
			height: 380px;
			background-color: #fff;
			position: relative;
			border-radius: 10px;
			margin: 50px auto;
			padding:0 50px;
			font-size: 24px;
			
		}
		.quote-text{
			vertical-align: middle;
			line-height: 48px;
			color: #a3a3a3;
			padding-top: 40px;
			padding-bottom: 40px;
			position: relative;
			font-family: 'Tangerine', serif;
			text-shadow: 1px 1px 1px #ff0;
			font-size: 48px;
		}
		.author{
			
			font-weight: bold;
		}
		.btn{
			background-size: 80px 44px;
			background-color: #ccc;
			width: 80px;
			height: 44px;
			border: 1px solid #666;
			border-radius: 5px;
			cursor: pointer;
			display: inline-block;
			position: absolute;
			bottom: 10px;
		}
		.weibo{
			left: 180px;
			background-image: url(../img/weibo.svg);
			
		}
		.twitter{
			left: 50px;
			background-image: url(../img/twitter.svg);
		}
		.change{
			right: 50px;
			background-image: url(../img/shuaxin.svg);
		}
		.weibo:hover, .twitter:hover, .change:hover{
			opacity: 0.5;
		}

实现交互的js部分 main.js

$(document).ready(function(){
 var quote, author; 
 
 function getNewQuote() { 
  $.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(); 
 
 function colors(){
 	return Math.floor(Math.random() * 255);
 }

 $('.change').on('click', 
 function(event) { 
  event.preventDefault(); 
  getNewQuote(); 
  var r=colors();
  var g=colors();
  var b=colors();
  console.log(r);

  $("body").animate({
  	backgroundColor:"rgb(" + r + "," + g + "," + b + ")"
  	}, 1000);
  $(".quote-text").animate({
  	color:"rgb(" + r + "," + g + "," + b + ")"
  });
  $(".btn").animate({
  	backgroundColor:"rgb(" + r + "," + g + "," + b + ")"
  },1000);
 }); 
 
 $('.twitter').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)); 
 }) 
});

程序截图：