全局变量的重要性

发表于由 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>scroll</title>
    <style>
        body {
            height: 2000px;
        }

        #div1 {
            height: 100px;
            width: 100px;
            position: absolute;
            right: 0px;
            bottom: 0px;
            background: red;
        }
    </style>
    <script>
        window.onload=function(){

            var oDiv1 = document.getElementById("div1")


            var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop
            //  document.documentElement.scrollTop || document.body.scrollTop

            var divtop = (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + oScrollTop

            oDiv1.style.top = divtop + 'px'


        }


        window.onscroll = function (e) {
            var e =e || window.event;

            var oDiv1 = document.getElementById("div1")


            var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop
            //  document.documentElement.scrollTop || document.body.scrollTop

            var divtop = (document.documentElement.clientHeight - oDiv1.offsetHeight)/2 + oScrollTop

            move(divtop)
        }
        var timer=null//若不是全局变量会蹦跶！！！！
        function move(position1){
            var object1=document.getElementById("div1")
            clearInterval(timer)
           // alert("object.offset=" + object1.offsetTop + " position=" + position1)
            timer = setInterval(function () {
                                if (object1.offsetTop != position1 ) {
                      var speed = (position1-object1.offsetTop)/2
                      speed = speed>0?Math.ceil(speed):Math.floor(speed)
                                   // alert(speed)
                                    //console.log("object.offset=" + object1.offsetTop + " position=" + position1)
                      object1.style.top=object1.offsetTop+speed+'px'
                  }
                  else
                      {
                                    clearInterval(timer)

                                }
            }, 30)
        }

    </script>
</head>

<body>
<input type="text" id="dp">
<div id="div1"></div>
</body>
</html>

发表回复