1.第一步导入jquery包然后布局，并且写好样式：
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
</head>
<style>
.conten{
width: 600px;
height: 350px;
margin: 0 auto;
margin-top: 50px;
}
p{
text-align: center;
}
.forrt{
width: 270px;
height: 40px;
border: 1px solid #DDDDDD;
line-height: 40px;
margin: 0 auto;
margin-top: 100px;
}
button{
margin-left: 6px;
}
</style>
<body>
<div class="conten" id="conten">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<div class="forrt" id="forrt">
<button class="magnify">放大</button>
<button class="shrink">缩小</button>
<button class="red rrr">红色</button>
<button class="green rrr">绿色</button>
<button class="blue rrr">蓝色</button>
</div>
</div>
</body>
2.定义字体大小，并且用缓存形式显示，localStroage将数据保存在客户端本地的硬件设备中，即使关闭了浏览器，改数据仍然存在，下次打开浏览器访问网站仍然可以继续使用;getItem返回指定的存储内容，如果不存在则返回null。注意,返回的类型是字符串类型。
var num=18 //初始值字体大小
var og=JSON.parse(localStorage.getItem("a"))|| ""
$("p").css("font-size",og)
3.三个颜色的按钮用数组括起来，并用if...else判断是否赋值，循环回初始值
var arr=["red","green","blue"]
var ok=JSON.parse(localStorage.getItem("b"))|| ""
$("p").css("color",ok)
if(!og==""){ //一个=赋值两个==内容
num=og
$("p").css("font-size",num+"px")
}else{
$("p").css("font-size",num+"px")
}
4.给按钮添加点击事件：
//放大
$(".magnify").click(function(){
num++
$(".conten p").css("font-size",num+"px")
localStorage.setItem("a",JSON.stringify(num))
})
//缩小
$(".shrink").click(function(){
num--
$(".conten p").css("font-size",num+"px")
localStorage.setItem("a",JSON.stringify(num))
})
//颜色
$(".forrt .rrr").click(function(){
// console.log($(this).index()-2)
var str=$(this).index()-2 //减去前面两个按钮
$("p").css("color",arr[str])
localStorage.setItem("b",JSON.stringify(arr[str]))
})
})
5.完整过程如下：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
</head>
<style>
.conten{
width: 600px;
height: 350px;
margin: 0 auto;
margin-top: 50px;
}
p{
text-align: center;
}
.forrt{
width: 270px;
height: 40px;
border: 1px solid #DDDDDD;
line-height: 40px;
margin: 0 auto;
margin-top: 100px;
}
button{
margin-left: 6px;
}
</style>
<body>
<div class="conten" id="conten">
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
<div class="forrt" id="forrt">
<button class="magnify">放大</button>
<button class="shrink">缩小</button>
<button class="red rrr">红色</button>
<button class="green rrr">绿色</button>
<button class="blue rrr">蓝色</button>
</div>
</div>
<script>
$(function(){
var num=18 //初始值字体大小
var og=JSON.parse(localStorage.getItem("a"))|| ""
$("p").css("font-size",og)
//三个颜色按钮
var arr=["red","green","blue"]
var ok=JSON.parse(localStorage.getItem("b"))|| ""
$("p").css("color",ok)
if(!og==""){ //一个=赋值两个==内容
num=og
$("p").css("font-size",num+"px")
}else{
$("p").css("font-size",num+"px")
}
//放大
$(".magnify").click(function(){
num++
$(".conten p").css("font-size",num+"px")
localStorage.setItem("a",JSON.stringify(num))
})
//缩小
$(".shrink").click(function(){
num--
$(".conten p").css("font-size",num+"px")
localStorage.setItem("a",JSON.stringify(num))
})
//颜色
$(".forrt .rrr").click(function(){
// console.log($(this).index()-2)
var str=$(this).index()-2 //减去前面两个按钮
$("p").css("color",arr[str])
localStorage.setItem("b",JSON.stringify(arr[str]))
})
})
</script>
</body>
</html>
注意点击当前颜色时要减去前面两个按钮。
