文档章节

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

哟猫Intry
 哟猫Intry
发布于 2016/06/22 15:47
字数 580
阅读 48
收藏 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
昌平
私信 提问
加载中

评论(0)

DOM系列:浏览器与DOM 主标签

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

一个敲代码的前端妹子
2018/05/28
0
0
DOM(一)——HTML DOM

对于B/S开发,客户端与服务器端的交互是非常必要的,JavaScript的提出解决了很多问题,AJAX的提出也解决了异步通信的问题,更加为用户着想了。而DOM是其中非常基础的知识,在学习AJAX的同时,...

风雨萧条
2016/11/14
0
0
JavaScript学习笔记(一)——JS基础知识介绍

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

长平狐
2013/01/06
186
0
物联网学习笔记——构建RESTFul平台1

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

thinkyoung
2014/12/02
0
0
前端学习之JavaScript DOM以及DOM操作的基础知识

在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM 需要注意的是,我们需要把DOM当作一个整体,不能分割看待,即DOM(文档对...

那是我呐
04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

二、netcore跨平台之 Linux部署nginx代理webapi

原文: 二、netcore跨平台之 Linux部署nginx代理webapi 上一章,我们讲了在linux上安装netcore环境,以及让netcore在linux上运行。 这一章我们开始讲在linux上配置nginx,以及让nginx反向代理...

osc_jo2m8l1r
30分钟前
17
0
CAD怎么转PDF文件?使用这款编辑器一键转换、批量转换

CAD怎么转换成PDF文件呢?小伙伴们不妨使用这款CAD编辑器,把CAD文件一键、批量转换成PDF文件哦。 有许多小伙伴应该都知道,为了满足各种学习、工作的需求,文件之间是经常需要相互转换格式的...

真不莲
30分钟前
19
0
详解Microsoft.AspNetCore.CookiePolicy

原文: 详解Microsoft.AspNetCore.CookiePolicy 详解Asp.Net Core中的Cookie策略 目录 详解Asp.Net Core中的Cookie策略 功能介绍 使用Cookie策略 从UseCookiePolicy方法入手 实现IResponseCo...

osc_0vd38ylb
31分钟前
16
0
怎么找到自己收藏过的思维导图模板?迅捷画图教你详细步骤!

怎么找到自己收藏过的思维导图模板?大家在刷视频的时候,遇到自己喜欢的视频,都会点个微信或者关注,用电脑看网页的时候,遇到有意思的网站,也会点击添加书签进行收藏,方便以后阅读或者是...

赛利亚大姐大
33分钟前
10
0
Microsoft.AspNetCore.Authentication.Cookies从入门到精通 (一)

原文: Microsoft.AspNetCore.Authentication.Cookies从入门到精通 (一) Microsoft.AspNetCore.Authentication.Cookies从入门到精通 (一) 目录 Microsoft.AspNetCore.Authentication.Cook......

osc_t5nbj8ds
33分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部