<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0px;
margin:0px;
}
button{width:100px;
height:100px;
background:linear-gradient(to left,#FF0,#099);
position:fixed;/*弹性布局*/
right:50%;
top:50%;
text-align:center;/*文本居中，行高，大小，颜色，字体*/
line-height:50px;
color:#FFF;
font-size:25px;
font-family:arial}
</style>
</head>
<body>
<button>开始加速</button>
<script>
var btn = document.getElementsByTagName(‘button‘)[0];
var div = document.createElement(‘div‘);
document.body.appendChild(div);
div.style.height = ‘100px‘;
div.style.width = ‘100px‘;
div.style.backgroundColor = ‘red‘;
div.style.borderRadius = ‘50%‘;
div.style.position = ‘absolute‘;
div.style.top = ‘0‘;
div.style.left = ‘0‘;
var speed = 5;
btn.onclick = function(){
speed +=20;}
document.onkeydown = function(e){
switch(e.which){
case 38://上
div.style.top = parseInt(div.style.top) - speed + ‘px‘;
break;
case 40://下
div.style.top = parseInt(div.style.top) + speed + ‘px‘;
break;
case 37://左
div.style.left = parseInt(div.style.left) - speed + ‘px‘;
break;
case 39://右
div.style.left = parseInt(div.style.left) + speed + ‘px‘;
break;
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/qq946487854/p/9855778.html
时间： 2024-10-07 09:20:01