• JavaScript排他思想小例子之按钮的点击效果

    什么是排他思想简单来说就是干掉所有人，留下我自己，亦或者是说，所有人带着自己都干掉，然后自己出一个复活甲，接下来用代码进行演示

    目录

     首先：框架，这里我们先添加上5个按钮

     第二步：js代码获取元素

     第三步：添加点击事件

     第四步：修改 

     第五步：添加样式

     第六步：排他

     

     

    首先：框架，这里我们先添加上5个按钮

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<button>按钮button>
    10. 		<button>按钮button>
    11. 		<button>按钮button>
    12. 		<button>按钮button>
    13. 		<button>按钮button>
    14. 	body>
    15.  
    16. 	<script>
    17. 	
    18. 	script>
    19. html>

    第二步：js代码获取元素

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<button>按钮button>
    10. 		<button>按钮button>
    11. 		<button>按钮button>
    12. 		<button>按钮button>
    13. 		<button>按钮button>
    14. 	body>
    15.  
    16. 	<script>
    17. 		var btns = document.querySelectorAll('button')
    18. 		
    19. 	script>
    20. html>

     第三步：添加点击事件

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<button>按钮button>
    10. 		<button>按钮button>
    11. 		<button>按钮button>
    12. 		<button>按钮button>
    13. 		<button>按钮button>
    14. 	body>
    15.  
    16. 	<script>
    17. 		var btns = document.querySelectorAll('button')
    18. 				
    19. 				btns.onclick = function(){					
    20. 																
    21. 			}											
    22. 		
    23. 	script>
    24. html>

    这里的话我们的目的是给每一个按钮添加一个点击事件，但queeryselectorall 有一个重点，他获取到的是一个伪数组，所以我们这样写是错的，要借助for循环来遍历出每一个元素

    第四步：修改 

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<button>按钮button>
    10. 		<button>按钮button>
    11. 		<button>按钮button>
    12. 		<button>按钮button>
    13. 		<button>按钮button>
    14. 	body>
    15.  
    16. 	<script>
    17. 		var btns = document.querySelectorAll('button')
    18. 		
    19. 			for(var i=0;ilength;i++){
    20. 				
    21. 			
    22. 				btns[i].onclick = function(){					
    23. 			
    24. 																
    25. 			}											
    26. 		
    27. 	script>
    28. html>

     这样的话就成功给每一个按钮添加上了点击事件，接下来我们给这些按钮添加一个点击改变背景颜色的效果

    第五步：添加样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<button>按钮button>
    10. 		<button>按钮button>
    11. 		<button>按钮button>
    12. 		<button>按钮button>
    13. 		<button>按钮button>
    14. 	body>
    15.  
    16. 	<script>
    17. 		var btns = document.querySelectorAll('button')
    18. 		
    19. 			for(var i=0;ilength;i++){
    20. 				
    21. 			
    22. 				btns[i].onclick = function(){					
    23. 			
    24. 			
    25. 				this.style.backgroundColor = 'red'																		
    26. 				}															
    27. 			}											
    28. 		
    29. 	script>
    30. html>

     大家会看见我点击了2个按钮，但2个按钮却都红了，这显然不是我们想要的效果，所以我们要用到排他思想来写

    第六步：排他

             排他思想简单来说就是干掉所有人，留下我自己，亦或者是说，所有人带着自己都干掉，然后自己出一个复活甲，一定要记住顺序不能颠倒，首先清除所有样式，然后在设置自己。清除所有样式，那怎么才能把所有的样式清除呢，所以这里又要借助for循环遍历给每一个元素清除样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<button>按钮button>
    10. 		<button>按钮button>
    11. 		<button>按钮button>
    12. 		<button>按钮button>
    13. 		<button>按钮button>
    14. 	body>
    15.  
    16. 	<script>
    17. 		var btns = document.querySelectorAll('button')
    18. 		
    19. 			for(var i=0;ilength;i++){
    20. 				
    21. 			
    22. 				btns[i].onclick = function(){					
    23. 			
    24. 				for(var i=0;ilength;i++){
    25. 					btns[i].style.backgroundColor = 'yellow'	
    26. 				}				
    27. 	
    28. 				this.style.backgroundColor = 'red'																		
    29. 				}															
    30. 			}											
    31. 		
    32. 	script>
    33. html>

    这样的话就达到了我们想要的效果，这里为了方便观察，我给每一个元素添加了黄色背景

     

  • 相关阅读:
    一个小型公司人工费用核算winform查询开发（3）
    【计算机网络】数据链路层：使用点对点信道的数据链路层
    巨量引擎AB落地页测试
    SpringMVC异常处理
    十天学完基础数据结构-第五天（栈（Stack）和队列（Queue））
    Springboot中认证和授权的实现（使用jwt）
    【设计模式】——策略模式
    oj刷题-C语言版
    SDN和NFV的区别？
    Vue3_pinia使用
  • 原文地址：https://blog.csdn.net/tea_tea_/article/details/126471811