javascriptでボタンを押したら一定方向に要素が一定距離だけ動くように
したいです。今回はtop位置をボタンを押すと上に○px;移動というようにしたいです。
- top:100~300pxの間で初めは300px;の位置
- ボタンを押すと+10px;現在の位置より上に上がる
- top:100px;位置までいくとボタンを押しても上がらないようにalert("stop");
以下とりあえずのコードです。
html
1 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>game</title> 6<style> 7#ball{ 8 width:50px; 9 height:50px; 10 border-radius:50%; 11 top:300px; 12 left:300px; 13 background-color:black; 14 position:absolute; 15} 16 17</style> 18 19</head> 20 21<body> 22 <div id="ball"></div> 23 24 <input type="button" value="up" id="up" onclick="up()"> 25</body> 26 27<script> 28 function up(){ 29 var ball=document.getElementById("ball"); 30 31 var dis=Math.floor(Math.random()*300); 32 var dis1=10; 33 34 var st=ball.style.top; 35 36 if(st<100){ 37 ball.style.top=-dis; 38 39 40 }else if(st>300){ 41 42 alert("stop"); 43 }else{ 44 45 ball.style.top=dis; 46 } 47 48 }; 49 50</script> 51</html>
とりあえずランダムでtop位置が絶対位置で変わってる・・・というような状態です。
jQueryは使わない方法でお願いします。
回答3件
あなたの回答
tips
プレビュー