js实现css样式变换的实训

最新推荐文章于 2024-10-05 01:22:45 发布

五星资源

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量79

点赞数

文章标签： javascript css python

本文链接：https://blog.csdn.net/Timi2019/article/details/131888494

版权

js实现css样式变换的实训

一、需求
二、效果展示
- 1.效果展示
三、实现
四、其他
- 1.其它系统

一、需求

完成以下功能：

1.掌控板三颗RGB灯初始所有RGB灯为红色

2.当掌控板P被触摸时，第一颗灯为白色，其他为红色；当掌控板Y被触摸时，第二颗灯为白色，其他为红色；当掌控板T被触摸时，第三颗灯为白色，其他为红色；

评分标准：（下列各项评分项单独计分，累加评判，共计90个计分点）

正确实现在初始状态下，三颗RGB灯为红色。

正确实现当掌控板P被触摸时，第一颗灯为白色，其他为红色；当掌控板T被触摸时，第三颗灯为白色，其他为红色；当掌控板Y被触摸时，第二颗灯为白色，其他为红色；

二、效果展示

1.效果展示

在这里插入图片描述

三、实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>灯</title> 
<script>
function myFunction(str){
	if(str=='P'){
		document.getElementById("R").setAttribute('style','background-color:red');
		document.getElementById("G").setAttribute('style','background-color:white');
		document.getElementById("B").setAttribute('style','background-color:white');
	}else if(str=='T'){
		document.getElementById("G").setAttribute('style','background-color:red');
		document.getElementById("R").setAttribute('style','background-color:white');
		document.getElementById("B").setAttribute('style','background-color:white');
	}else if(str=='Y'){	
		document.getElementById("B").setAttribute('style','background-color:red');	
		document.getElementById("R").setAttribute('style','background-color:white');
		document.getElementById("G").setAttribute('style','background-color:white');		
	}
	
}
</script>
</head>
<body>
	
<h1>RGB灯</h1>
<button id="R" style='background-color:red'>R</button>
<button id="G" style='background-color:red'>G</button>
<button id="B" style='background-color:red'>B</button>
<br>
<br>
<br>
<button type="button" onclick="myFunction('P')">P</button>
<button type="button" onclick="myFunction('T')">T</button>
<button type="button" onclick="myFunction('Y')">Y</button>
	
</body>
</html>