JavaScript强化教程——DOM编程（两种控制div移动的方法）

来源：互联网发布：守望先锋for mac 编辑：程序博客网时间：2024/06/11 16:48

本文为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强化教程

0 0