文档章节

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

哟猫Intry
 哟猫Intry
发布于 2016/06/22 15:47
字数 580
阅读 17
收藏 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
昌平
私信 提问
JavaScript学习笔记(一)——JS基础知识介绍

术语解释 Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为...

长平狐
2013/01/06
113
0
DOM系列:浏览器与DOM 主标签

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

一个敲代码的前端妹子
05/28
0
0
javaScript事件(一)事件流

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

蜗牛奔跑
2015/06/24
0
0
物联网学习笔记——构建RESTFul平台1

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

thinkyoung
2014/12/02
0
0
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Libusb交叉编译和移植

  Libusb交叉编译和移植      某项目内核需要支持USB的相关操作,所以考虑移植Libusb库      1、到官网下载最新的libusb源码(1.0.22)      2、解压源码      3、进入解压...

SEOwhywhy
16分钟前
1
0
阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

一、八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储。持续8年的投入,历经8年双...

阿里云云栖社区
19分钟前
1
0
【58沈剑 架构师之路】数据库索引,到底是什么做的?

问题1. 数据库为什么要设计索引? 图书馆存了1000W本图书,要从中找到《架构师之路》,一本本查,要查到什么时候去? 于是,图书管理员设计了一套规则: (1)一楼放历史类,二楼放文学类,三楼...

张锦飞
19分钟前
2
0
android webpage err_unknown_url_scheme

搞一个 Android 的webview demo 来访问网页, 结果 模拟器就报错了: webpage err_unknown_url_scheme 于是去百度了 一下。发现挺多解决方案的,都拿来试试。居然有几种方式都可以。 1, 参考...

之渊
22分钟前
1
0
JVM总结

区域简介 JVM运行时区域有些随着虚拟机进程的启动而存在,有些依赖于用户线程的启动和结束而建立和销毁,大致分为以下几类:方法区,虚拟机栈,本地方法栈,堆,程序计数器,概念图如下(源于...

瑞查德-Jack
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部