JavaScript强化教程——DOM编程(两种控制div移动的方法)
2016-07-19 11:17
615 查看
本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程——DOM编程(两种控制div移动的方法)
第一种 按钮控制
首先 创建两个html按钮和一个div并给div一个样式
第二种,键值控制
同样在html中创建div并给其样式
document.onkeydown(在document文档对象中,按任何键都会触发此函数)
alert中输出的event.keyCode会对应按键时,当前键相应的事件值(即每一个按键对应为一个键值)
第一种 按钮控制
首先 创建两个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>点击进入JS强化教程
<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>
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- js数组实现图片轮播
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- js可突破windows弹退效果代码