sbc11

day7

事件
事件绑定

点击查看代码 
<html>
  <head>
    <title>Title</title>

  </head>
  <body>
  <input type="button" id="btn1" value="事件绑定1" onclick="on()">
  <input type="button" id="btn2" value="事件绑定2" onclick="">

  </body>
  <script>
    function on(){
      alert("按钮一被点击了");
    }
    document.getElementById('btn2').onclick = function (){
      alert("按钮二被点击了");
    }
  </script>
</html>

实例

点击查看代码 
<html>
  <head>
    <title>Title</title>

  </head>

  <body>
  <img id="photo" src="1.jpg" > <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="All()">
  <input type="button" value="反选" onclick="se()">

  </body>
  <script>
    //1.改变图片功能
    function on(){
      var img = document.getElementById('photo');
      img.src="2.jpg";
    }
    function off(){
      var img = document.getElementById('photo');
      img.src = "1.jpg";
    }

    //2.输入框功能
    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 All(){
      var hobbys = document.getElementsByName("hobby");
      for(let i = 0;i<hobbys.length;i++){
        const element = hobbys[i];
        element.checked = true;
      }
    }
    function se(){
      var hobbys = document.getElementsByName("hobby");
      for(let i = 0;i<hobbys.length;i++){
        const element = hobbys[i];
        element.checked = false;
      }
    }
  </script>
</html>

posted on 2025-01-24 14:57  沈八才11  阅读(7)  评论(0)    收藏  举报

导航