【利用HTML5数据存储点击按钮字体放大缩小以及颜色变化】

最新推荐文章于 2022-06-24 20:06:28 发布

wang拾柒

最新推荐文章于 2022-06-24 20:06:28 发布

阅读量2.2k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_42160554/article/details/82883324

版权

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>

注意点击当前颜色时要减去前面两个按钮。