zoukankan      html  css  js  c++  java
  • 实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)

    1:鼠标移入移出显示另一张图片  

      var yuanquan_1 = document.getElementById("yuanquan_1" ); 
      yuanquan_1. onmouseover = function () {
                         yuanquan_1.src = "img/youhuigoujiu-2.png";
                    }
                    yuanquan_1. onmouseout = function () {
                         yuanquan_1.src = "img/youhuigoujiu.png";
                    }
     
    2:点击元素显示内容,在点击该元素隐藏内容
      var tu_add_icon=document.getElementById("tu-add-icon");
      var tu_ul = document.getElementById("tu-ul" );
                tu_add_icon.addEventListener( "click",function () {
                       if (tu_ul.style .display=='none' ) {
                            tu_ul. style.display = 'block';
                      } else{
                            tu_ul. style.display = 'none';
                      }
                })
     
    3:单选框radio切换
      var man = document .getElementById("man");
       var woman = document .getElementById("woman");
                  man. onclick = function () {
                            man.checked = true;
                            woman.checked = false;
                  }
                  
                  woman. onclick = function () {
                            woman.checked = true;
                            man.checked = false;
                  }
     
     注:把input的type和name属性都设置为radio的时候可以直接有切换的效果
     

    4:循环添加移入移出事件 

      var zizhi = document.getElementsByClassName("zizhi" );
      for(var i = 0 ; i<zizhi.length;i ++){
           zizhi[i].addEventListener( "mouseover",function (){
                 this.style.width = "600px";
              this.style .height = "600px" ;
                 this.style. position = "absolute" ;
              this. style.top = 0;
           })
        }
     
      for(var i = 0 ; i<zizhi.length;i ++){
           zizhi[i].addEventListener( "mouseout",function (){
                 this.style.width = "200px";
              this.style .height = "200px" ;
                 this.style. position = "static" ;
           })
       }
     

    5:点击选框全选  

    function quanXuan() {
              var tu_li_quanxuan = document.getElementById("checkAll" );
              var duo_xuan = document.getElementsByClassName("tu-input" );
              var type = tu_li_quanxuan.checked;
                     if(type==true) {
                          for(var i = 0 ; i < duo_xuan.length; i ++) {
                                if(duo_xuan[i].type == 'checkbox') {
                                    duo_xuan[i].checked = true;
                               }
                         }
                    } else {
                          for(var i = 0 ; i < duo_xuan.length; i ++) {
                                if(duo_xuan[i].type == 'checkbox') {
                                    duo_xuan[i].checked = false;
                               }
                         }
                    }
               }
                
     
    全选也可以这样写
        function quanXuan() {
               var tu_li_quanxuan = document.getElementById("checkAll" );
                  var duo_xuan = document.getElementsByClassName("tu-input" );
                  var type = tu_li_quanxuan.checked;
                     for(var i = 0 ; i < duo_xuan.length; i ++) {
                               duo_xuan[i].checked = type;
                    }
               }
     
    有一个单选框没有选中,全选也不选中
        var tu_li_quanxuan = document.getElementById("checkAll" );
            var duo_xuan = document.getElementsByClassName("tu-input" );
                     for (var i = 0 ; i < duo_xuan.length; i ++) {
                         duo_xuan[i].addEventListener( "click",function (){
                                if (this.checked== false) {
                                    tu_li_quanxuan.checked =false;
                               }
                         })
                    }
     
     
     
      
      
     
     
  • 相关阅读:
    中等疾病活动度的RA患者持续传统治疗的结果:来自ERAN的数据
    中信国健临床通讯2011年1月第1期目录
    影像学是否应该纳入RA缓解标准?传统评分与修订后复合评分和影像学评估的比较
    RA患者妊娠期使用依那西普维持缓解
    TNFα拮抗剂减少脊髓损伤大鼠神经元和少突胶质细胞的凋亡
    新近起病的活动性RA患者中达标治疗与常规治疗的疗效比较:来自GUEPARD试验和ESPOIR队列的数据
    TNF抑制剂相关的肿瘤风险:阿达木单抗、依那西普和英夫利昔单抗随机对照试验的荟萃分析
    依那西普治疗日本RA患者的安全性与疗效的上市后监察
    依那西普与柳氮磺吡啶治疗强直性脊柱炎的临床疗效与安全性比较:一项随机双盲研究(ASCEND试验)
    POJ3450 Corporate Identity KMP+枚举
  • 原文地址:https://www.cnblogs.com/tu-0718/p/5909718.html
Copyright © 2011-2022 走看看