第五次作业：按钮点亮灯泡

小条xxxxxxxxxxt

已于 2023-12-30 17:03:09 修改

阅读量410

点赞数 7

文章标签： javascript 开发语言 ecmascript

于 2023-12-30 12:02:00 首次发布

本文链接：https://blog.csdn.net/2201_75926626/article/details/135303901

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <title>点亮灯泡</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script>
       
    </script>
</head>
<body>
    <img id="h1" src="th.jpg"> <br><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="on1()">
    <input type="button" value="反选" onclick="off1()">
    <script>
        function on(){
            var img=document.getElementById("h1");
            img.src="OIP-C.jpg";
        }
        function off(){
            var img=document.getElementById("h1");
            img.src="th.jpg";
        }

        function lower(){
            var input=document.getElementById("name");
            input.value=input.value.toLowerCase();
        }
        function upper(){
            var input=document.getElementById("name");
            input.value=input.value.toUpperCase();
        }
                


        
        function on1(){
            var ins=document.getElementsByName("hobby");
            for(let i=0;i<ins.length;i++){
            const check=ins[i];
            check.checked=true;
            }
        }
        function off1(){
            var ins=document.getElementsByName("hobby");
            for(let i=0;i<ins.length;i++){
            const check=ins[i];
            check.checked=false;
            }
        }
        
    

        

    </script>
</body>