一、创建一个小球和两堵墙以及按钮
<style type="text/css">
#box{
width:60px;height:60px;position:absolute;left:10px;top:0px;background:#333;border-radius:50%;margin-top:80px;
}
#qiangL{
width:2px;height:150px;position:absolute;left:10px;background:#999;margin-top:20px;
}
#qiangR{
width:2px;height:150px;position:absolute;left:1000px;background:#999;margin-top:20px;
}
</style>
</head>
<body>
<button id="btn1">开始</button>
<button id="btn">停止</button>
<div id="box"></div>
<div id="qiangL"></div>
<div id="qiangR"></div>二、利用js分别找到墙和小球以及按钮的Id
<script type="text/javascript">
// 找到小球的Id
var o=document.getElementById('box');
// 左边墙的Id
var qiangL=document.getElementById('qiangL');
// 右边墙的Id
var qiangR=document.getElementById('qiangR');
// 每次添加的距离
var wd=5;
// 求出小球的左边的距离
var a=window.getComputedStyle(o,null).left;
// 对左边墙的距离取整
var b=parseInt(window.getComputedStyle(qiangL,null).left);
// 对右边墙的距离取整
var c=parseInt(window.getComputedStyle(qiangR,null).left);
// 取得小球距离右边墙的距离取整
var dq=c-parseInt(window.getComputedStyle(o,null).width);
// 定义全局变量以后用于清理定时器
var d;
// 添加布尔值
var z=true;三、添加点击事件及小球运动的函数
// 设置开始按钮的点击事件
document.getElementById("btn1").onclick=function(){
// 先添加清理定时器再添加定时器防止多次点击出错
clearInterval(d);
d=setInterval(showleft,20);
}
// 设置停止按钮的点击事件
document.getElementById("btn").onclick=function(){
clearInterval(d);
}
// 定义具体函数
function showleft(){
// 小球的左边的距离取整
a=parseInt(a);
// 当z为真时小球向右运动,撞右墙时z变假,当z为假时小球向左运动,撞左墙时z变真便可无限循环
if(z==true){
if(a<dq){
a=a+wd;
o.style.left=a+"px";
}else{
z=false;
}
}else{
if(a==b){
z=true;
}else{
a=a-wd;
o.style.left=a+"px";
}
}
}
</script>
总体代码为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width:60px;height:60px;position:absolute;left:10px;top:0px;background:#333;border-radius:50%;margin-top:80px;
}
#qiangL{
width:2px;height:150px;position:absolute;left:10px;background:#999;margin-top:20px;
}
#qiangR{
width:2px;height:150px;position:absolute;left:1000px;background:#999;margin-top:20px;
}
</style>
</head>
<body>
<button id="btn1">开始</button>
<button id="btn">停止</button>
<div id="box"></div>
<div id="qiangL"></div>
<div id="qiangR"></div>
<script type="text/javascript">
// 找到小球的Id
var o=document.getElementById('box');
// 左边墙的Id
var qiangL=document.getElementById('qiangL');
// 右边墙的Id
var qiangR=document.getElementById('qiangR');
// 每次添加的距离
var wd=5;
// 求出小球的左边的距离
var a=window.getComputedStyle(o,null).left;
// 对左边墙的距离取整
var b=parseInt(window.getComputedStyle(qiangL,null).left);
// 对右边墙的距离取整
var c=parseInt(window.getComputedStyle(qiangR,null).left);
// 取得小球距离右边墙的距离取整
var dq=c-parseInt(window.getComputedStyle(o,null).width);
// 定义全局变量以后用于清理定时器
var d;
// 添加布尔值
var z=true;
// 设置开始按钮的点击事件
document.getElementById("btn1").onclick=function(){
// 先添加清理定时器再添加定时器防止多次点击出错
clearInterval(d);
d=setInterval(showleft,20);
}
// 设置停止按钮的点击事件
document.getElementById("btn").onclick=function(){
clearInterval(d);
}
// 定义具体函数
function showleft(){
// 小球的左边的距离取整
a=parseInt(a);
// 当z为真时小球向右运动,撞右墙时z变假,当z为假时小球向左运动,撞左墙时z变真便可无限循环
if(z==true){
if(a<dq){
a=a+wd;
o.style.left=a+"px";
}else{
z=false;
}
}else{
if(a==b){
z=true;
}else{
a=a-wd;
o.style.left=a+"px";
}
}
}
</script>
</body>
</html>
易错点：1、点击时没清理定时器导致多次点击出bug。
2、没考虑到布尔类型的运用