第五次练习-CSDN博客

本文链接：https://blog.csdn.net/2202_75844191/article/details/134738731

1.点亮灯泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../img/off.gif" alt="off" id="one"><br>
    <div class="text">武汉科技大学</div><br>
    <div class="text">信息管理系</div>
    <input type="checkbox" name="check">网页设计
    <input type="checkbox" name="check">java程序设计
    <input type="checkbox" name="check">数据结构


    <script>
        var image=document.getElementById("one");
        image.src="../img/on.gif";
        var write=document.getElementsByClassName("text");
        for(let i=0;i<write.length;i++){
            write[i].innerHTML+="<font color='red'> very good </font>";
        }
        var box=document.getElementsByName("check");
        for(let i=0;i<box.length;i++){
            box[i].checked=true;
        }


    </script>
</body>
</html>

2.事件交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡</title>
</head>
<body>
    <img src="../img/off.gif" id="img" alt="关闭"><br>
    <input type="button" id="点亮" value="点亮" onclick="on()">
    <input type="button" id="熄灭" value="熄灭" onclick="off()"><br>
    <input type="text" value="ITCAST" id="text1" onfocus="small()"><br>
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏<br>
    <input type="button"  name="choice" value="全选" onclick="allSelect()">
    <input type="button" name="choice" value="反选" onclick="noneSelect()">



<script>
    function on(){
        var image=document.getElementById("img");
        image.src="../img/on.gif";
    }
    function off(){
        var image=document.getElementById("img")
        image.src="../img/off.gif";
    }
    function small(){
        var text=document.getElementById("text1").value;
        text=text.toLowerCase();
        document.getElementById("text1").value=text;
    }
    function allSelect(){
        var group=document.getElementsByName("hobby");
        for(let i=0;i<group.length;i++){
            group[i].checked=true;
        }
    }
    function noneSelect(){
        var group2=document.getElementsByName("hobby");
        for(let i=0;i<group2.length;i++){
            if(group2[i].checked){
                group2[i].checked=false;
            }
            else{
              group2[i].checked=true;
            }
        }
    }

</script>


    
</body>
</html>