滑鼠點選按鈕控制圖片移動或者鍵盤控制圖片移動（解決問題：parseInt失效問題，用Number）
阿新 • • 發佈：2018-11-20
在測試用滑鼠點選按鈕，使圖片左右上下移動：
效果如下：
程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 600px; height: 400px; margin: 100px auto 0; background: pink; position: relative; } img{ width: 60px; height: 60px; position: absolute; top: 0px; left: 0px; } table{ width: 120px; height: 120px; margin: 0 auto; } </style> <script> function move(num){ var mario = document.getElementById("mario"); var l = mario.style.left;//獲取圖片當前left值 var t = mario.style.top;//獲取圖片當前top值 l = Number(l.substr(0, l.length-2));//擷取left值，去掉px 如果改成parseInt（）則會失效，詳情繼續往下看解決辦法t = Number(t.substr(0, t.length-2));//擷取top值，去掉px switch(num){ case 0: mario.style.top = (t-10)+"px"; break; case 1: mario.style.left = (l+10)+"px"; break; case 2: mario.style.top = (t+10)+"px"; break; case 3: mario.style.left = (l-10)+"px"; break; } } </script> </head> <body> <div> <img src="img.jpg" id="mario" alt=""/> </div> <table> <tr> <th colspan="3">點選移動圖片</th> </tr> <tr align="center"> <td colspan="3"><input type="button" value="↑" onclick="move(0)"></td> </tr> <tr> <td><input type="button" value="←" onclick="move(3)"></td> <td>㊣</td> <td><button onclick="move(1)">→</button></td> </tr> <tr align="center"> <td colspan="3"><input type="button" value="↓" onclick="move(2)"></td> </tr> </table> </body> </html>
在上面如果我們吧Number（）改成parseInt（） 我們會發現失效了，滑鼠點選圖片不會移動，反而會報錯。
如果我們想換成parseInt()那我們可以這樣改
把img圖形的樣式改為內聯樣式：
<img src="img.jpg" id="mario" alt="" style="position: absolute;top: 0px;left: 0px;"/>
這樣再把l = Number(l.substr(0, l.length-2)); 改為l = parseInt(l.substr(0, l.length-2));就不會報錯了
為什麼會這樣呢：
是因為style只能獲取內聯樣式，所以使用parseInt就不能實現。
鍵盤控制圖片移動：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 600px; height: 400px; margin: 100px auto 0; background: pink; position: relative; } img{ width: 60px; height: 60px; position: absolute; top: 0px; left: 0px; } table{ width: 120px; height: 120px; margin: 0 auto; } </style> <script> window.onload = function () { document.onkeydown = function () { var event = event || window.event;//瀏覽器相容問題 var mario = document.getElementById("mario"); var l = mario.style.left;//獲取圖片當前left值 var t = mario.style.top;//獲取圖片當前top值 l = Number(l.substr(0, l.length-2));//擷取left值，去掉px t = Number(t.substr(0, t.length-2));//擷取top值，去掉px switch(event.keyCode){ case 38: mario.style.top = (t-10)+"px"; break; case 39: mario.style.left = (l+10)+"px"; break; case 40: mario.style.top = (t+10)+"px"; break; case 37: mario.style.left = (l-10)+"px"; break; } } } function move(num){ } </script> </head> <body> <div> <img src="img.jpg" id="mario" alt=""/> </div> </body> </html>