<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 800px;
height: 600px;
border: 20px solid blue;
position: relative;
}
#box2{
width: 50px;
height: 50px;
background: #000;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
input{
width: 200px;
height: 100px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
</div>
</div>
<input type='button' value="开始" id="kaishi">
<input type='button' value="暂停" id="zanting">
</body>
<script>
// 定时器
var a;
function $ (namex){
return document.querySelector(namex);
}
// console.log($("#box1"));
// 点击获取开始按钮
$('#kaishi').onclick=function(){
this.disabled=true;
$('#zanting').disabled=false;
// 小球向前动
a=setInterval(move,1);
}
// 点击获取暂停按钮
$('#zanting').onclick=function(){
this.disabled=true;
clearInterval(a);
$('#kaishi').disabled=false;
}
var xiangzuo=0;
var xiangshang=0;
var xiangzuoX=true;
var xiangzuoY=true;
// 定义的计时函数
function move(){
if(xiangzuoX){
xiangzuo+=10;
// id可以直接当元素使用
var xiangzuoMAX=box1.clientWidth-box2.offsetWidth;
console.log(xiangzuo);
if(xiangzuo>=xiangzuoMAX){
xiangzuo=xiangzuoMAX;
xiangzuoX=false;
}
}else{
xiangzuo-=10;
if(xiangzuo<=0){
xiangzuo=0;
xiangzuoX=true;
}
}
if(xiangzuoY){
xiangshang+=5;
// id可以直接当元素使用
var xiangshangMAX=box1.clientHeight-box2.offsetHeight;
if(xiangshang>=xiangshangMAX){
xiangshang=xiangshangMAX;
xiangzuoY=false;
}
}else{
xiangshang-=5;
if(xiangshang<=0){
xiangshang=0;
xiangzuoY=true;
}
}
$('#box2').style.left=xiangzuo+'px';
$('#box2').style.top=xiangshang+'px';
}
</script>
</html>
小球碰壁反弹
最新推荐文章于 2024-08-03 17:05:14 发布