<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{width: 80px;height: 80px;background-color: red;border-radius: 50%;
position: absolute;top: 100px;left: 50px;}
</style>
</head>
<body>
<button id="btn-left">向左</button>
<button id="btn-right">向右</button>
<button id="btn-top">向上</button>
<button id="btn-bottom">向下</button>
<div id="box"></div>
<script type="text/javascript">
var ball=document.querySelector('#box');
var t;
//向左移动
document.querySelector('#btn-left').onclick=function(){
clearInterval(t);//清除定时器
//启动定时器
t=setInterval(moveHor,10,-1);
};
//向右移动
document.querySelector('#btn-rig
JavaScript制作按钮控制圆移动效果
最新推荐文章于 2023-10-24 12:54:02 发布