<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{padding:0px; margin:0px; } button{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>