20200914戚权

知识点:

1. 导弹案例:

       <button id="fire">发射按钮</button>
       <br>
   
       <button id="daodan">导弹按钮,装载导弹</button>
   
       <button id="nofire">卸载导弹</button>
   
       <script type="text/javascript">
   
           console.log(window.outerHeight)
   
           console.log(window.outerWidth)
   
           console.log(window.innerHeight)
   
           console.log(window.innerWidth)
   
           var daodan = document.getElementById("daodan")
   
           var fire = document.getElementById("fire")
   
           var nofire = document.getElementById("nofire")
   
           fire.onclick = function( ) {
   
               alert("发射子弹")
   
           }
   
           function fun1(){
   
               alert("发射导弹")
   
           }
   
           daodan.onclick = function (){
   
               fire.onclick = null;
   
               fire.addEventListener("click",fun1)
   
           }
   
           nofire.onclick = function(){
   
               fire.onclick = function(){
   
                   alert("发射子弹")
   
               }
   
               fire.removeEventListener("click",fun1)
   
           }
   
       </script>
   

2. 计算器案例:

       <div id="wrap" class="wrap">
           <button>1</button><span>|</span>
   
           <button>2</button><span>|</span>
   
           <button>3</button><span>|</span>
   
           <button>4</button><span>|</span>
   
           <br><br>
   
           <button>-</button><span>|</span>
   
           <button>+</button><span>|</span>
   
           <button>=</button><span>|</span>
   
           <button>C</button><span>|</span>
   
       </div>
   
       <textarea id="textShow" value="123" style="width: 300px; height: 200px;resize: none;" readonly></textarea>
   
       <script type="text/javascript">
   
           var wrap = document.getElementById("wrap")
   
           var textShow = document.getElementById("textShow")
   
           wrap.onclick = function (e) { 
   
               if(e.target.nodeName === "BUTTON"){
   
                   console.log(e.target)
   
                   switch(e.target.innerHTML){
   
                       case "C":
   
                           textShow.value = ""
   
                           break
   
                       case "=":
   
                           if(textShow.value !== ""){
   
                               textShow.value = eval(textShow.value)
   
                           }
   
                           break
   
                       default:
   
                       textShow.value += e.target.innerHTML 
   
                   }
   
               }
   
            }
   
       </script>
   

3. 鼠标滚轮事件

           <script type="text/javascript">
               var a=1;
   
               // chrome/safari 滚轮事件
   
               window.onmousewheel=document.onmousewheel=function(e){
   
                   console.log(a++)
   
                   console.log(e.wheelDelta)
   
                   if(e.wheelDelta>0){
   
                       console.log("向上滚动")
   
                       console.log(e.wheelDelta)
   
                   }else{
   
                       console.log("向下滚动")
   
                       console.log(e.wheelDelta)
   
                   }
   
               }
   
               // firefox 滚轮事件
   
               // document.addEventListener('DOMMouseScroll',function(e){...},false)
   
               // document.addEventListener("DOMMouseScroll",function(e){
   
               //  console.log(e.detail)
   
               // })
   
               // IE/opera
   
               // document.attachEvent('onmousewheel',function(e){
   
               //  console.log(e.wheelDelta)
   
               // })
   
           </script>