二、 整个浏览器可视区域的碰壁反弹

margin:0;

padding:0;

}

#bounce{

height: 50px;

width: 50px;

border-radius: 50%;/*background: yellow;*/position: absolute;

left:0;

top:0;

}

//获取元素

var container = gt("con");//小球所在容器

var bounce = gt("bounce");//反弹的小球

//设置小球随机背景颜色

bounce.style.background =ranColor();//获取小球在可视区域的滚动范围

//获取可视区域的宽高(不含任务栏)

var aWidth = document.documentElement.clientWidth || document.body.clientWidth ||window.innerWidth;var aHeight = document.documentElement.clientHeight || document.body.clientHeight ||window.innerHeight;

console.log("可视区域不含任务栏的范围：w："+aWidth + "===h："+aHeight);//减去小球的宽高即为活动范围,此处不加单位，方便moveDistance()方法内if条件判断

var scrollMaxX = (aWidth -bounce.offsetWidth);var scrollMaxY = (aHeight -bounce.offsetHeight);

console.log("小球可滚动的范围：x："+scrollMaxX+"===y："+scrollMaxY);//设置小球滚动，每隔几秒滚动一段距离//var timer = setInterval(function(){alert("haha")},1000);

var timer = setInterval(moveDistance,30);//设置小球移动

var stepX = 5;var stepY = 5;functionmoveDistance(){//console.log("进入moveDistance")

var currentLeft = bounce.offsetLeft +stepX;var currentTop = bounce.offsetTop +stepY;//判断小球是否滚动到最大的宽度、高度，如果滚动到最大宽度、高度，设置反弹滚动 *(-1)

if(currentLeft >=scrollMaxX){

currentLeft=scrollMaxX;

stepX*= -1;

bounce.style.background=ranColor();

}else if(currentLeft <= 0){

currentLeft= 0;

stepX*= -1;

bounce.style.background=ranColor();

}if(currentTop >=scrollMaxY){

currentTop=scrollMaxY;

stepY*= -1;

bounce.style.background=ranColor();

}else if(currentTop <= 0){

currentTop= 0;

stepY*= -1;

bounce.style.background=ranColor();

}

bounce.style.left= currentLeft + 'px';

bounce.style.top= currentTop + 'px';

console.log(bounce.style.left);//console.log("离开moveDistance");

}//设置窗口改变监听器;onresize 事件会在窗口或框架被调整大小时发生。

//当浏览器窗口发生改变时，重新获取浏览器当前可视化窗口的尺寸，重新计算小球能移动的最大宽度和高度

window.onresize = function(){

aWidth= document.documentElement.clientWidth || document.body.clientWidth ||window.innerWidth;

aHeight= document.documentElement.clientHeight || document.body.clientHeight ||window.innerHeight;

scrollMaxX= (aWidth -bounce.offsetWidth);

scrollMaxY= (aHeight -bounce.offsetHeight);

}//设置小球随机颜色方法

functionranColor(){var red = parseInt(Math.random()*255);var green = parseInt(Math.random()*255);var blue = parseInt(Math.random()*255);return "RGB(" + red + "," + green + "," + blue + ")";

}//设置通过id获取元素的函数

functiongt(e){returndocument.getElementById(e);

}