JS实例和作业

最新推荐文章于 2024-07-24 11:09:48 发布

Faith.777

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量334

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2303_80224736/article/details/135373445

版权

<!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, initialscale=1.0">
        <title>JS-事件-案例</title>
       
     <script>
        function on(){
            var img=document.getElementById("light");
            img.src="素材\img\on.gif";
        }
        function off(){
            var img=document.getElementById("light");
            img.src="素材\img\off.gif";
        }
        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 checkAll(){
            var hobbys=document.getElementsByName("hobby");
            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>
    </head>
    <body>
        <img id="light" src="素材\img\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> 
</html>

<!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, initialscale=1.0">
        <title>JS-事件-案例</title>
       
     <script>
      var img=document.getElementById("light");
        img.src="素材\img\on.gif";
        var divs = document.getElementsByTagName ( 'div');
           for (let i = 0; i < divs.length; i++) {
                const div = divs [i];
                div.innerHTML += "<font color='red'>very good</font>"; 
            }
         var ins = document.getElementsByName ('hobby');
            for (let i = 0; i < ins.length; i++) {
                const check = ins [i];
                check.checked = true;//选中
            }
    </script>
    </head>
    <body>
        <img id="h1" src="img/off.gif"> <br><br>
        <div class="cls">武汉科技大学</div> <br>
        <div class="cls">信息管理系</div> <br>
        <input type="checkbox" name="hobby"> 网页设计
        <input type="checkbox" name="hobby"> java程序设计
        <input type="checkbox" name="hobby"> 数据结构

    </body>
</html>