网页设计——第二次上机测试2

信管2202陈安志

已于 2023-12-19 00:46:30 修改

阅读量497

点赞数 12

文章标签： html

于 2023-12-19 00:40:57 首次发布

本文链接：https://blog.csdn.net/2301_80812728/article/details/135074522

版权

<!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>第二次上机测试2</title>
    <script src="../Vue基础代码/js/vue.js"></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>
 <script>
        var img = document.getElementById("h1");
        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>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二次上机测试22</title>
    <script src="../Vue基础代码/js/vue.js"></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="control" onfocus="upper()"  onblur="lower()">
 
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
 
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">
</body>
 
<script>
    window.onload=function(){

    on=function () {
      
        var img=document.getElementById("light");
       
        img.src="../素材/素材/img/on.gif";
    }
    
    off=function (){
        var img=document.getElementById("light");
        img.src="../素材/素材/img/off.gif";
    }
 
    
    lower=function (){
        var input=document.getElementById("name");
        input.value=input.value.toLowerCase();
    }
   
    upper=function(){
        var input=document.getElementById("name");
        input.value=input.value.toUpperCase();
    }
 
    
    checkAll=function(){
        var hobbys=document.getElementsByName("hobby");
        for(let i=0;i<hobbys.length;i++){
        const element=hobbys[i];
        element.checked=true;
        }
    }
    
    reverse=function (){
        var hobbys=document.getElementsByName("hobby");
        for(let i=0;i<hobbys.length;i++){
        const element=hobbys[i];
        element.checked=false;
        }
    }
}
</script>
</html>