JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结：
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>
