pageX,clientX,screenX,offsetX区别,封装n到m的随机数,封装随机颜色,按钮禁用

1. pageX,clientX,screenX,offsetX区别

Event.pageX...只有这样才可以代表鼠标

pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。

clientX/clientY：
事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。

screenX/screenY
鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。

offsetX/offsetY:
得出的结果跟pageX/pageY一样，只有IE支持！

2.封装n到m的随机数

var random = function (n,m) {

            return Math.floor(Math.random()*(m - n + 1)+n)

        }

3.封装随机颜色

var rgb = function(){

            return 'rgb('+random(0,255)+','+random(0,255)+','+random(0,255)+')'

        }

1. 移动产生蓄条动画

window.onmousemove = function () {

            var event = event || window.event;

            var num = 0;

            var timer = setInterval(function () {

                list[num].style.display = 'block';

                list[num].style.backgroundColor = rgb();

                // var width = list[0].offsetLeft;

                list[num].style.left = event.clientX + 'px';

                // console.log(event.clientX);

                list[num].style.top = event.clientY + 'px';

                num++

                if (num >= list.length) {

                    clearInterval(timer);

                }

            }, 500);

        }

1. 按钮禁用

this.disabled = true;