文档章节

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

哟猫Intry
 哟猫Intry
发布于 2016/06/22 15:47
字数 580
阅读 16
收藏 2

本文为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强化教程:http://www.h5edu.cn/htm/step/h5edu_44.html

© 著作权归作者所有

共有 人打赏支持
哟猫Intry
粉丝 0
博文 46
码字总数 31138
作品 0
昌平
DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子
05/28
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung
2014/12/02
0
0
javaScript事件(一)事件流

javaScript事件(一)事件流 一、事件 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。 事件是javaScript和DOM之间的桥梁。 你若触发,我便执行——事件发生...

蜗牛奔跑
2015/06/24
0
0
为什么JavaScript是你应当学习的下一个(或第一个)编程语言

原文出处:dentedreality 译文出处:腊八粥 本文是翻译,版权归原作者所有 我已经被多次问到,如果我刚刚开始,我应当学习什么编程语言,答案一定是JavaScript,下面是为什么: 最简单的开发...

dentedreality
2014/12/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

[MicroPython]STM32F407开发板驱动OLED液晶屏

1.实验目的 1.学习在PC机系统中扩展简单I/O 接口的方法。 2.进一步学习编制数据输出程序的设计方法。 3.学习 F407 Micropython开发板控制OLED显示字符。 2.所需元器件 F407 Micropython开发板...

bodasisiter
17分钟前
0
0
php require和include 相对路径一个有趣的坑

以前总是被教育,不要使用相对路径,这样性能比较差,但是相对路径的问题不仅仅是性能哦,看下面这里例子 这是项目结构 .├── main.php├── t│ ├── t1.php│ └── t2.php└─...

anoty
18分钟前
9
0
x64技术之SSDT_Hook

测试环境: 虚拟机: Windows 7 64bit 过PG工具 驱动加载工具 PCHunter64 系统自带的计算器和任务管理器等 实现思路: 实际思路与win32的思路一样.都是替换SSDT表里边的函数地址.不过微软被搞怕...

simpower
19分钟前
0
0
TreeMap源码分析,看了都说好

一、简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现。TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey、get、put 和 remove 操作,效率很...

Java小铺
29分钟前
0
0
协变、逆变

概念 假设 A、B表示类型 ≤ 表示继承关系 f<⋅>表示类型转换 若A ≤ B,则 A是B的子类,B是A的超类 协变、逆变 什么是型变?型变(type variance)允许对类型进行子类型转换。 为了下面讲解先...

obaniu
35分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部