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

2018-12-25 08:22:46来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

 

本次练习错误总结:

 

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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js正则表达式之人民币匹配

下一篇:实例演示popdiv的操作