Javaweb--js小案例

àì夳堔傛蜴生んèń 2024-03-26 22:07 51阅读 0赞

**目录**

需求：

代码：

运行结果：

图片素材：

--------------------

### 需求： ###

![96635660054347f4a17090a9dab4ce8b.png][]

#### 代码： ####

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>
                JS--事件--案例
            </title>
        </head>
        <body>
            <img id="light" src="C:\Users\CaptainDong\Desktop\HTML\img2\off.gif"><br>
    
            <input type="button" value="点亮" onclick="on()">
            <input type="button" value="熄灭" onclick="off()">
            <br><br>
    
            <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
            <br><br>
    
            <input type="checkbox" name="hobby">电影
            <input type="checkbox" name="hobby">旅游
            <input type="checkbox" name="hobby">游戏
            <br>
    
            <input type="button" value="全选" onclick="checkAll()">
            <input type="button" value="反选" onclick="reverse()">
        </body> 
    
        <script>
            //1.单击”点亮按钮“，点亮灯泡，单击”熄灭按钮“，熄灭灯泡；----onclick
    
            function on(){
                //a.获取img元素对象
                var img=document.getElementById("light");
                //b.设置src属性
                img.src="../img2/on.gif";
            }
            function off(){
                var img=document.getElementById("light");
                img.src="../img2/off.gif";
            }
    
            //2.输入框聚焦后，展示小写；离焦后大写 -----onfocus ---onblur
    
            function lower(){   //展示小写
                //a.获取输入框元素对象
                var input=document.getElementById("name");
                //b.将值转小写
                input.value=input.value.toLowerCase();
            }
            function upper(){   //展示大写
                //a.获取输入框元素对象
               var input= document.getElementById("name");
                //b.将值转大写
                input.value=input.value.toUpperCase();
            }
    
            //3.点击"全选"按钮使所有的复选框呈现全部选中状态；单击“反选”按钮使所有的复选框呈现取消勾选状态；--onclick
            function checkAll(){
                //a.获取所有的复选框元素对象
                var hobbys=document.getElementsByName("hobby");
                //b.设置选中状态
                for (let i = 0; i < hobbys.length; i++) {
                    const element = hobbys[i];
                    element.checked=true;
                }
            }
            function reverse(){
                //a.获取所有的复选框元素对象
                var hobbys=document.getElementsByName("hobby");
                //b.设置未选中状态
                for (let i = 0; i < hobbys.length; i++) {
                    const element = hobbys[i];
                    element.checked=false;
                }
            }
        </script>
    </html>

#### 运行结果： ####

![74a9ec32b0e64d8eaefe29cb8e08ce03.png][]

![e78595d94c5546a98976903386510149.png][]

![a0fe784e273c482bb851580f75ccfe6c.png][]

### 图片素材： ###

![40660a699aba4f1baa5bdf2bbc78181f.gif][]

![8b63651d74764a5d908da2eff88201bd.gif][]

[96635660054347f4a17090a9dab4ce8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/44182e50b4e440eea07eeca71cde512a.png
[74a9ec32b0e64d8eaefe29cb8e08ce03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/30a1a44bc93f4f0c99e02a34f7f5a317.png
[e78595d94c5546a98976903386510149.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/95ad164d78db40d9a34b3b83c2bbe330.png
[a0fe784e273c482bb851580f75ccfe6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/2b43b548b09b4b35b7188cb56347a7cf.png
[40660a699aba4f1baa5bdf2bbc78181f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3423bcf2a0604455a61aaf277c293f46.png
[8b63651d74764a5d908da2eff88201bd.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/061aff9332e04d6399dba374bcd77009.png