JavaScript中的排他算法实现按钮单选

淡淡的烟草味﹌ 2024-03-31 16:09 12阅读 0赞

## JavaScript中的排他算法实现按钮单选 ##

**案例池子**：  
[JS实现鼠标悬停变色  
][JS_]  
[JavaScript中的排他算法实现按钮单选][JavaScript]  
[JavaScript中的localStorage  
][JavaScript_localStorage]  
[JavaScript中的sessionStorage  
][JavaScript_sessionStorage]  
[JavaScript实现网页关灯效果][JavaScript 1]  
[JavaScript实现一段时间之后关闭广告  
][JavaScript_]  
[JavaScript实现按键快速获取输入框光标  
][JavaScript_ 1]

### 演示效果 ###

![在这里插入图片描述][de9382b815b9467c9b1f2f25ea0ae57f.png]

### 概述 ###

简介：通过排他算法，我可以实现每次点击按钮，然后只有一个会亮。

### HTML框架 ###

### JS逻辑 ###

### 完整代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script>
            // 1. 获取所有按钮元素
            var btns = document.getElementsByTagName('button');
            // btns得到的是伪数组  里面的每一个元素 btns[i]
            for (var i = 0; i < btns.length; i++) {
          
                btns[i].onclick = function() {
          
                    // 首先把所有的按钮的背景颜色都设置为空
                    for (var i = 0; i < btns.length; i++) {
          
                        btns[i].style.backgroundColor = '';
                    }
                    // 然后再设置被选中的按钮的颜色
                    this.style.backgroundColor = 'skyblue';
    
                }
            }
        </script>
    </body>
    
    </html>

[JS_]: https://blog.csdn.net/qq_51447496/article/details/128223527
[JavaScript]: https://blog.csdn.net/qq_51447496/article/details/128224547
[JavaScript_localStorage]: https://blog.csdn.net/qq_51447496/article/details/128224131
[JavaScript_sessionStorage]: https://blog.csdn.net/qq_51447496/article/details/128223971
[JavaScript 1]: https://blog.csdn.net/qq_51447496/article/details/128226136
[JavaScript_]: https://blog.csdn.net/qq_51447496/article/details/128226463
[JavaScript_ 1]: https://blog.csdn.net/qq_51447496/article/details/128227052
[de9382b815b9467c9b1f2f25ea0ae57f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8ee8c3a979b34811a7fd812b289dc6b1.png