HTML5中把一首古诗变大缩小和变颜色并用数据储存起来

最新推荐文章于 2024-03-12 15:26:15 发布

Lurkers.

最新推荐文章于 2024-03-12 15:26:15 发布

阅读量1.1k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/this_name_true/article/details/82885834

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图如下：

代码如下：

<!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>

谢谢----

Lurkers.

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5中把一首古诗变大缩小和变颜色并用数据储存起来

效果图如下：代码如下： &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;放大缩小变颜色&lt;/title&gt; &lt;script type="text/javascript" src=
复制链接

扫一扫