js-实现点击循环变色问题

最新推荐文章于 2022-12-06 17:34:16 发布

老衲的少女心i

最新推荐文章于 2022-12-06 17:34:16 发布

阅读量1.6k

点赞数 1

分类专栏： javascript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_42592823/article/details/115363920

版权

javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用JavaScript实现一个简单的HTML元素点击后循环改变背景颜色的效果。作者提供了两种方法，一种是切换两种颜色，另一种是循环三种颜色。代码中详细解释了事件监听和switch语句的应用，适合初学者理解JavaScript操作DOM和处理事件。

摘要由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js-点击循环变色事件</title>
		<style>
			#box {
            width: 200px;
            height: 200px;
            background-color: pink;
            cursor: pointer;//小手
        }
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			var oBox=document.getElementById("box");
			
			
			//方法1：只有两种颜色变换的方法
//			var flag=true;
//			oBox.οnclick=function(){
//				if(flag){
//					oBox.style.background="red";
//				}else{
//					oBox.style.background="yellow";
//				}
//				flag=false;
//			}
//			
			
			
			
			//方法2：超过两个以上的颜色变换的方法
			var count = 0; //默认0是粉色
			oBox.onclick=function(){
				count++;
				switch(count%3){
					case 0:
						oBox.style.background="pink";
						break;
					case 1:
						oBox.style.background="green";
						break;
					case 2:
						oBox.style.background="red";
					
				}
			}
		</script>
	</body>
</html>