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>

评论

this is is footer