• JS错误记录


    本次练习错误总结:

    1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动。

    2. if条件语句里面是双等号,不是单等号(赋值)。

    3. 坐标值没有Right,只能offsetLeft 加减。

    //oDiv.style.right = oDiv.offsetRight + 10 + 'px';
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            /* border: 1px solid #000; */ 
            position:absolute; 
            /* 没写绝对定位。。。。。。div不能移动。。。 */
        }
        </style>
    
        <script>
        document.onkeydown = function(ev){
            var oEvent = ev||event;
            var oDiv = document.getElementById('div1');
    
           // if(oEvent.keyCode = 39)  
           //赋值是一个等号,if里面是双等号 == 
    
           if(oEvent.keyCode == 39)  
           {
                oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
            }
            else if(oEvent.keyCode == 37)
            {
              //oDiv.style.right = oDiv.offsetRight + 10 + 'px';
              //没有右边值。。。。 只能offsetLeft 加减。
              oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
            }
        };
        </script>
    function getPos(ev) {
                // var oEvent = ev||event;   这里是否需要这个变量?   不需要
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    
                return { x:ev.clientX + scrollLeft, y:ev.clientY + scrollTop}
            };
    
            document.onmousemove = function (ev) {
                var oEvent = ev||event;
                var pos = getPos(oEvent);
                var aDiv = document.getElementsByTagName('div');
    
                for(var i=aDiv.length-1; i>0; i--){
                    aDiv[i].style.left = aDiv[i-1].offsetLeft + 'px';
                    aDiv[i].style.top= aDiv[i-1].offsetTop + 'px';
                }
    
                aDiv[0].style.left = pos.x + 'px';
                aDiv[0].style.top = pos.y + 'px';
            };
  • 相关阅读:
    【CF833E】Caramel Clouds
    【LG2183】[国家集训队]礼物
    (ex)Lucas总结
    【CF527C】Glass Carving
    【CF833D】Red-Black Cobweb
    【LG4631】[APIO2018]Circle selection 选圆圈
    volatile梳理
    ThreadLocal梳理
    java线程基础梳理
    TCP/IP
  • 原文地址:https://www.cnblogs.com/carpenterzoe/p/10191154.html
Copyright © 2020-2023  润新知