標籤：html5 js
本文為H5EDU機構官方HTML5培訓教程，主要介紹：JavaScript強化教程——DOM編程（兩種控制div移動的方法）
第一種 按鈕控制
首先 建立兩個html按鈕和一個div並給div一個樣式
input type="button" value="左" id="1"><input type="button" value="右" id="2"><div id="3">
div { width: 100px; height: 100px; background-color: bisque; position: absolute; left: 100px; top: 100px; }
然後在script中獲得div和兩個按鈕
var left = document.getElementById("2"); var right = document.getElementById("1"); var div = document.getElementById("3");
然後添加onclick函數
left.onclick = function () { } right.onclick = function () { }
設定一個變數，控制div的left改變
var x = 100;
當點擊按鈕時觸發
left.onclick = function () { x=x+10; div.style.left = x+"px"; } right.onclick = function () { x=x-10; div.style.left = x+"px"; }
源碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: bisque; position: absolute; left: 100px; top: 100px; } </style></head><body><input type="button" value="左" id="1"><input type="button" value="右" id="2"><div id="3"></div><script> var left = document.getElementById("2"); var right = document.getElementById("1"); var div = document.getElementById("3"); var x = 100; left.onclick = function () { x=x+10; div.style.left = x+"px"; } right.onclick = function () { x=x-10; div.style.left = x+"px"; }</script></body></html>
第二種，索引值控制
同樣在html中建立div並給其樣式
<div id="3"></div>
<style> div { width: 100px; height: 100px; background-color: bisque; position: absolute; left: 100px; top: 100px; } </style>
在script裡面 獲得div
var div=document.getElementById("3");
然後聲明兩個變數控制改變div的left和top
var px=100; var py =100;
然後獲得索引值
document.onkeydown（在document文檔對象中，按任何鍵都會觸發此函數）
alert中輸出的event.keyCode會對應按鍵時，當前鍵相應的事件值（即每一個按鍵對應為一個索引值）
document.onkeydown = function(){ alert(event.keyCode);}
然後通過測試上下左右得到索引值，在swich語句中改變div的left和top改變其位置
switch (event.keyCode){ case 37: px = px-10; div.style.left = px+"px"; break; case 38: py = py-10; div.style.top = py+"px"; break; case 39: px = px+10; div.style.left = px+"px"; break; case 40: py = py+10; div.style.top = py+"px"; break; }
源碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: bisque; position: absolute; left: 100px; top: 100px; } </style></head><body><div id="3"></div><script> var div=document.getElementById("3"); var px=100; var py =100; document.onkeydown = function(){// alert(event.keyCode); switch (event.keyCode){ case 37: px = px-10; div.style.left = px+"px"; break; case 38: py = py-10; div.style.top = py+"px"; break; case 39: px = px+10; div.style.left = px+"px"; break; case 40: py = py+10; div.style.top = py+"px"; break; } }</script></body></html>
點擊進入JS強化教程
本文出自 “11721999” 部落格，請務必保留此出處http://11731999.blog.51cto.com/11721999/1827680
JavaScript強化教程——DOM編程（兩種控制div移動的方法）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
