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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript强化教程——DOM编程(两种控制div移动的方法)相关的知识,希望对你有一定的参考价值。

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

本文出自 “11722655” 博客,请务必保留此出处http://11732655.blog.51cto.com/11722655/1791740

以上是关于JavaScript强化教程——DOM编程(两种控制div移动的方法)的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript强化教程——sessionStorage和localStorage

JavaScript强化教程——JavaScript 总结

javascript教程系列40:DOM中操作样式的两种方式

JavaScript强化教程 —— JavaScript 总结

JavaScript强化教程——函数参数

JavaScript强化教程——使用误区