1. 程式人生 > >方向鍵控制圓球運動(簡易)(js)

方向鍵控制圓球運動(簡易)(js)

click linear charset tel speed har utf absolut 運動

<!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>

方向鍵控制圓球運動(簡易)(js)