当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS错误记录 - 右侧悬浮框 - 缓冲运动

JS错误记录 - 右侧悬浮框 - 缓冲运动

2018年12月25日  | 移动技术网IT编程  | 我要评论

 

本次练习错误总结：

 

1.  正确：
startmove( document.documentelement.clientheight - odiv.offsetheight + scrolltop);
错误：
startmove(document.documentelement.clientheight - odiv.offsettop + scrolltop);
startmove(itarget); 这个函数的目标点 itarget 应该是 可视窗高度 – div的高度 + 滚动条上方的滚动距离
div的高度是  offsetheight，是一整个div的高度。 div的offsettop是它的top位置值。
 
2.  必须用timer指定定时器，否则清除定时器时清除不了。 

timer = setinterval(function (){ },30)    // 不能直接写setinterval(function (){ },30)


3.  函数作用域问题？？ （感觉经常犯这种错误）




var speed = (itarget - odiv.offsettop)/4;




该速度变量是定时器使用，所以要定义在定时器的函数里面。 而不是定义到startmove( ); 这个运动函数里。


 


4. 




 startmove(document.documentelement.clientheight - odiv.offsetheight + scrolltop); 






//这里末尾不应该加‘px’， 括号内是函数的参数，而不是赋值给样式！


且后面定时器里 if(odiv.offsettop == itarget)  offsettop返回值为数字。 itarget不需要px单位。



5.  clearinterval ( ); 清除定时器是在startmove ( ); 运动函数里面的一开始去清除，而不是外面。且应该在括号内指定(timer)。



6.  该段代码odiv获取过两次。在window.onscroll函数和 function startmove( )里分别获取了。
因为运动函数和窗口启动自带的滚动条函数不是包含关系，所以要重新获取一遍div变量。



7.  定时器格式  setinterval ( function () {  },30)   括号里要跟function函数。



8. 




 if(itarget==odiv.offsettop)     //应该是odiv.offsettop == itarget，即运动的位置达到了目标值 





疑问


为什么window.onscroll函数 和后面的startmove函数是分别运行的关系，而不是包含关系？



第二次写的代码批注：




<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>右侧悬浮框</title>
  <style>
    #div1{
      width: 100px;
      height: 150px;
      background-color: plum;
      position: absolute;
      right: 0;
      bottom: 0;
    }
  </style>
  <script>
    window.onscroll = function () {
      var odiv = document.getelementbyid('div1');
      var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;

      //startmove(document.documentelement.clientheight-odiv.offsettop+scrolltop);
      startmove(document.documentelement.clientheight-odiv.offsetheight+scrolltop);
      //这里应该是odiv.offsetheight，不是offsettop。  区别是？？？
    };

    var timer = null;

    function startmove(itarget) {

      clearinterval(timer);

      var odiv = document.getelementbyid('div1');

      //setinterval(function (){   这里没用timer指定定时器。。。所以前面清除定时器和这里对应不上。
      timer = setinterval(function (){
        var speed = (itarget - odiv.offsettop)/4; //这个变量是定时器里面使用的，要定义到定时器的函数里。
        speed = speed>0? math.ceil(speed):math.floor(speed);

        if (odiv.offsettop == itarget)
        {
          clearinterval(timer);
        }
        else
        {
          odiv.style.top = odiv.offsettop + speed + 'px';
        }
      },30)
    }
  </script>
</head>
<body style="height: 2000px";>
<div id="div1">
</div>
</body>
</html>




 


错误代码：




<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>右侧悬浮框</title>
    <style>
        #div1{
            width: 100px;
            height: 150px;
            background-color: palevioletred;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        window.onscroll = function () {
            var odiv = document.getelementbyid('div1');
            var scrolltop = document.documentelement.scrolltop || document.body.scrolltop;

            startmove(document.documentelement.clientheight - odiv.offsetheight + scrolltop); //这里末尾不应该加‘px’！ 括号内是函数的参数，而不是赋值给样式！
        };
            
            var timer = null;
            //clearinterval();     //此处是否需要清除？ 要清除，是在startmove运动开始里面去清除。

            //timer=setinterval(function startmove(itarget) //写法错误，定时器是在startmove函数里面开启，定时器和函数不是同级的。
            function startmove(itarget)
            {
                var odiv = document.getelementbyid('div1');
                //运动函数和窗口启动自带的滚动条函数不是包含关系，所以要重新获取一遍div变量。

                clearinterval(timer);

                timer=setinterval(function () {    //setinterval格式：括号里面要跟个函数function
                    var speed = (itarget - odiv.offsettop)/4; // speed不是前面startmove传参的，是新的变量，这里要用var！！
                    speed=speed>0?math.ceil(speed):math.floor(speed);

                    //if(itarget==odiv.offsettop){   //应该是odiv.offsettop == itarget，即运动的位置达到了目标值
                    if(odiv.offsettop == itarget)
                    {
                        clearinterval(timer);
                    }
                    else
                    {
                        odiv.style.top = odiv.offsettop+speed+'px';
                    }
                },30);
            }
    </script>
</head>
<body style="height: 2000px;">
<div id="div1">
</div>
</body>
</html>




 


正确代码：




<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
    </style>
    <script>
        window.onscroll=function ()
        {
            var odiv=document.getelementbyid('div1');
            var scrolltop=document.documentelement.scrolltop||document.body.scrolltop;

            //odiv.style.top=document.documentelement.clientheight-odiv.offsetheight+scrolltop+'px';
            startmove(document.documentelement.clientheight-odiv.offsetheight+scrolltop);
            //可视窗高度-div高度+滚动条顶部距离
       };

        var timer=null;

        function startmove(itarget)
        {
            var odiv=document.getelementbyid('div1');
            //为什么要分别获取div1？？
            // 为什么window.onscroll函数 和后面的startmove函数是分别运行的关系，而不是包含关系？

            clearinterval(timer);
            timer=setinterval(function (){
                var speed=(itarget-odiv.offsettop)/4;
                speed=speed>0?math.ceil(speed):math.floor(speed);

                if(odiv.offsettop==itarget)
                {
                    clearinterval(timer);
                }
                else
                {
                    odiv.style.top=odiv.offsettop+speed+'px';
                }
            }, 30);
        }
    </script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>




 


                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                


                

                

                    
相关文章:

                    
                

               
                       
                             

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网