效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大缩小变颜色</title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<style>
*{
margin: 0px;
padding: 0px;
}
p{
font-family: cursive;
}
</style>
</head>
<body>
<div class="container">
<div class="book">
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</div>
<div>
<button class="btn-big">放大</button>
<button class="btn-small">缩小</button>
<button class="btn btn-red">红色</button>
<button class="btn btn-green">绿色</button>
<button class="btn btn-yellow">黄色</button>
</div>
</div>
<script>
var num = localStorage.getItem("oBig")||16
$(".book").css("font-size",num+"px")
$(".btn-big").click(function(){
num++
if(num>20){
num = 20
localStorage.setItem("oBig",num)
return
}
$(".book").css("font-size",num+"px")
localStorage.setItem("oBig",num)
})
$(".btn-small").click(function(){
num--
if(num<12){
num = 12
localStorage.setItem("oBig",num)
}
$(".book").css("font-size",num+"px")
localStorage.setItem("oBig",num)
})
$(".btn").click(function(){
})
$(".btn-red").click(function(){
$(".book").css("color","red")
})
$(".btn-green").click(function(){
$(".book").css("color","green")
})
$(".btn-yellow").click(function(){
$(".book").css("color","yellow")
})
</script>
</body>
</html>
谢谢----