JS练习123

最新推荐文章于 2024-11-03 16:56:30 发布

郭郭郭憨憨

最新推荐文章于 2024-11-03 16:56:30 发布

阅读量402

点赞数 2

文章标签：大数据

本文链接：https://blog.csdn.net/qq_59494319/article/details/125435517

版权

使红绿蓝三种颜色按顺序切换并且储存在本地数据库当中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wrapper{
				width: 200px;
				height: 200px;
				border-radius: 30px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper"></div>
		<script>
			var tag=parseInt(localStorage.getItem("tag"))||0;
			var a=document.querySelector("#wrapper");
			if(tag==0){
				a.style.backgroundColor='red';
			}else if(tag==1){
				a.style.backgroundColor='green';
			}else{
				a.style.backgroundColor='blue';
			}
			a.onclick=function(){
				tag==2?tag=0:tag++;
				if(tag==0){
					a.style.backgroundColor='red';
					localStorage.setItem("tag",tag);
				}else if(tag==1){
					a.style.backgroundColor='green';
					localStorage.setItem("tag",tag);
				}else if(tag==2){
					a.style.backgroundColor='blue';
					localStorage.setItem("tag",tag);
					tag=-1;
				}
			}
		</script>
	</body>
</html>

使红绿蓝三种颜色随机切换并且储存在本地数据库当中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wrapper{
				width: 200px;
				height: 200px;
				border-radius: 30px;
			}
		</style>
	</head>
	<body>
		<div id="wrapper"></div>
		<script>
			var tag=parseInt(localStorage.getItem("tag"))||0;
			var a=document.querySelector("#wrapper");
			if(tag==0){
				a.style.backgroundColor='red';
			}else if(tag==1){
				a.style.backgroundColor='green';
			}else{
				a.style.backgroundColor='blue';
			}
			a.onclick=function(){
				tag=Math.floor(Math.random()*3);
				if(tag==0){
					a.style.backgroundColor='red';
					localStorage.setItem("tag",tag);
				}else if(tag==1){
					a.style.backgroundColor='green';
					localStorage.setItem("tag",tag);
				}else if(tag==2){
					a.style.backgroundColor='blue';
					localStorage.setItem("tag",tag);
				}
			}
		</script>
	</body>
</html>