javascript进阶
BOM操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script>
// 简略写法
// alert("这是浏览器的一个对话框");
// 完整写法：如果直接调用的是window的属性或者方法，window可以省略
// window.alert("这是指定要使用浏览器的对话框");
// 这里声明的test()函数，已经自动交给window对象了
// 在当前的网页中，test()函数是挂载到window对象上的
/*function test() {
alert("这是一个普通函数");
}*/
//直接调用函数
//window.test();
// 这是一个什么东西？
// 用来做什么的？ 信息输出，代码调试
// 为什么要用console.log?而不是alert()和document.write()
// alert（）要弹出对话框，操作麻烦
// document.write()可以在网页中输出信息，但是会破坏网页结构
// console.log()单独在控制台输出数据，不会对网页造成不良影响
console.log(window);
// 通过window对象，可以操作和浏览器软件相关的信息
// window.alert();//调用浏览器的对话框操作
// history对象：项目中几乎不用
//window.history.back();//后退操作,返回上一个访问历史
//window.history.forward();//前进操作，访问下一个访问历史
//window.history.go(2);//跳转到某一个访问历史
// location对象：项目中的url操作
/*console.log(location);
console.log(location.href);// 获取当前网页的url地址
console.log(location.protocol);//获取当前访问协议
console.log(location.host);// 获取访问网页的主机地址
console.log(location.hostname);
console.log(location.post);// 访问端口*/
// JS代码控制页面的指向
/*setTimeout(function() {
location.href="http://www.baidu.com"
}, 2000)*/
/*setTimeout(function() {
location.reload()// 刷新网页
}, 5000)*/
// screen对象
// screen表示电脑屏幕的意思
// screen.width/height表示的是电脑屏幕的宽度和高度分辨率
// screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】
// console.log(screen.width, screen.height);
// console.log(screen.availWidth, screen.availHeight);
// navigator对象：浏览器软件的信息
// console.log(navigator);
/*
bom模型中需要了解的重要的东西
*/
// location.href
// location.reload
// navigator对象的意义
</script>
</head>
<body>
</body>
</html>
DOM操作获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
获取标签对象
</title>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<div></div>
<div name="jerry"></div>
<div class="container" id="con">
<div class="item"></div>
</div>
<script>
/*
1. 【了解】直接通过id属性进行使用
2. 【熟练】通过getElementById(id)获取
3. 【熟练】通过getElementsByTagName()根据标签名称获取
4. 【了解】通过getElementsByName()根据name属性值获取
5. 【熟练】通过getElementsByClassName()根据class属性值获取
6. 【了解】混合写法
*/
// 直接通过标签的id属性，得到标签对象【 不推荐】
console.log(box);
box.innerText = "可以通过标签的id属性直接使用标签"
// 通过getElemnetById("id")函数，来通过id属性值获取标签，【推荐】
var _box = document.getElementById("box2");
_box.innerText = "通过ElementById()函数获取标签对象，进行操作"
// 通过标签名称，可以获取到一组标签
var _boxes = document.getElementsByTagName("div");
console.log(_boxes);
_boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"
// 通过标签的name属性，也可以获取到一组标签
var _jerry = document.getElementsByName("jerry");
console.log(_jerry);
_jerry.innerText = "通过name属性获取标签"
// 通过标签的class属性获取标签：IE8.0+
var _container = document.getElementsByClassName("container");
console.log(_container);
_container[0].innerText = "这个是通过class属性获取到的标签对象"
// JS中获取到的对象是什么东西？
// JS可以通过各种方法，获取到页面上的标签元素，在JS中，获取到的这个标签元素对象，称为 DOM对象/节点对象/标签对象
// 可以通过上述的方法混合使用来获取对象：混合写法
// 混合写法，常见于面试，项目开发时基本不用。对于语法需要了解即可！
// 先获取一个父标签，再获取该标签中的指定的子标签
/*var _item = document.getElementById("con").getElementsByClassName("item");*/
// 待解决？！？！
var _x = document.getElementById("con")
var _y = _x.getElementsByTagName("div")
console.log(_x, _y);
</script>
</body>
</html>
内容操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>标签内容操作</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<!-- 代码注入漏洞简单演示 -->
<!-- onkeyup表示当键盘上的按键抬起的时候触发的事件操作 -->
<input type="text" id="name" onkeyup="change()">
<div>用户输入了姓名：<span id="show"></span></div>
<script>
var _box1 = document.getElementById("box1");
var _box2 = document.getElementById("box2");
var _box3 = document.getElementById("box3");
// 对于标签内容的操作，有三种方式
/*
1. innerText：给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】
2. textContent：dom操作，给标签的开始标签和结束标签中增加文本内容，W3C标准操作
3. innerHTML：给标签的开始标签和结束标签中，增加一段HTML代码；慎重使用，容易造成代码注入漏洞！
*/
_box1.innerText = "通过innerText属性，可以增加<b>文本内容</b>";
_box2.textContent = "通过textContent增加的文本<del>内容</del>"
_box3.innerHTML = "通过<b>innerHTML属性</b>给标签增加内容";
/*
所谓代码注入漏洞，是用于可以在客户端通过输入包含代码的字符串的方式，将带入注入到我们的网页中进行执行的过程
*/
var _c = document.getElementById("show")
var _name = document.getElementById("name");
function change() {
var _value = _name.value;//获取输入框中的数据
_c.innerHTML = _value;//将输入增加到span标签中
}
// innerHTML的使用规则
// 对于数据的来源，完全信任的情况下使用它。其他时候禁止使用！
</script>
</body>
</html>
属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS操作标签属性</title>
</head>
<body>
<!-- value是input标签的属性 -->
输入年龄：<input type=">
<script>
var _name = document.getElementById("uname");
// 1. 直接通过 [标签对象.属性]来操作标签的属性值
_name.value = ";
_name.id = "age";
// 删除value属性。。。。：这样的语法是不能删除属性的
// _name.value = null;
console.log(_name.value, _name.id);
// 2. 通过 标签对象.["属性名称"] 来操作标签的属性值
_name["value"] = 110;
_name["id"] = "phone";
console.log(_name["value"], _name["id"]);
// 3. DOM操作方式，通过getAttribute("属性名称")获取标签的属性值
_name.setAttribute("value", 119);
_name.setAttribute("id", "sex");
// _name.className = "sex";
_name.removeAttribute("value");
console.log(_name.getAttribute("value"), _name.getAttribute("id"));
/*重点：在项目中使用原生JS操作标签的属性时，有这样的一个规则
id属性、title属性，建议通过 标签对象.属性名称 的语法进行处理。
class属性，建议通过 标签对象.className 的语法进行处理。
其他属性，建议使用set/getAttribute()的语法进行处理。
*/
</script>
</body>
</html>
抽奖案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>抽奖游戏</title>
<style>
*{margin:0;padding:0;}
#box,#outer,#inner,#btn_group{margin:auto;}
#box{width:500px;height:600px;border:solid 2px orange; border-radius:8px;}
#outer,#inner{width: 450px;height: 450px;border-radius:50%;}
#outer{border:solid 2px orange;margin-top:20px;padding:10px;}
#inner{background:red;font-size:70px;line-height:450px;text-align:center;color:#fff;}
#btn_group{width:400px;margin-top:50px;}
#btn_group > button{width:150px;height:50px;background:orange;color:#fff;font-size:20px;}
#btn_group > button:nth-child(2){float:right;}
</style>
</head>
<body>
<!-- 游戏面板 -->
<div id="box">
<!-- 展示信息 -->
<div id="outer">
<div id="inner">
等待抽奖
</div>
</div>
<div id="btn_group">
<button onclick="startGame()">开始抽奖</button>
<button onclick="stopGame()">停止抽奖</button>
</div>
</div>
<script>
// 定义抽奖名单
var _names = ["李万军","许胜利","史世民","闫荣廷","张玄兵","陈杨","薛腾","纪路","周新飞","高重阳","李想","史诗鹏","应一矿","陈桂林","王舟洋","翟慧慧","邢丽敏","王佩","薛晨"]
var _show = document.getElementById("inner");
//定义一个变量，用于存放计时函数
var _timer;
// 添加一个抽奖程序是否已经启动的变量:这样的变量，在有些地方也称为开关变量或者状态变量
var _flag = false;
// 定义抽奖函数
function startGame() {
if(!_flag) {
_flag = true;
_timer = setInterval(function() {
// 获取一个随机整数
var _no = Math.floor(Math.random() * _names.length);
// 获取姓名
var _name = _names[_no];
// 添加到标签中进行展示
_show.innerText = _name;
},100);
}
}
// 定义中奖函数
function stopGame() {
_flag = false;
clearInterval(_timer);
}
</script>
</body>
</html>
抽奖案例02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!--
需求分析：有一个圆形的抽奖信息展示的地方，有一个按钮可以用来开始/停止抽奖
-->
<style>
*{margin:0px;padding:0px;}
.container{width: 500px;height: 600px;background: #eee;border:solid 2px orange;margin:auto;border-radius:10px;}
.box,.show,.show_active{width:450px;height: 450px;border-radius:50%;}
.box{border:solid 2px orange;padding:10px;margin:10px auto;}
.show{background-color:pink;font-size:70px;line-height:450px;text-align:center;}
.show_active{background-color:red;color:#fff;font-size:70px;line-height:450px;text-align:center;}
#btn{width: 200px;height: 40px;background:pink;display:block;margin:auto;font-size:20px;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div id="show" class="show">
等待抽奖
</div>
</div>
<button id="btn" onclick="playGame()">开始抽奖</button>
</div>
<script>
// 中奖观众
var _names = ["李万军","许胜利","史世民","闫荣廷","张玄兵","陈杨","薛腾","纪路","周新飞","高重阳","李想","史诗鹏","应一矿","陈桂林","王舟洋","翟慧慧","邢丽敏","王佩","薛晨"];
//获取页面中要使用的标签对象
var _btn = document.getElementById("btn");
var _show = document.getElementById("show");
// 定义一个保存计时器的变量；保存是否开始抽奖的 变量
var _timer;
var _flag = false;
// 定义函数，开始抽奖
function playGame() {
if(!_flag) {
_flag = true;
_timer = setInterval(function() {
// 获取随机下标
var _no = Math.floor(Math.random() * _names.length);
// 获取中奖观众
var _n = _names[_no];
// 展示中奖观众
_show.textContent = _n;
// 修改按钮的文本
_btn.textContent = "停止抽奖";
// 修改展示的样式
_show.className = "show_active";
}, 50);
} else {
_flag = false;
clearInterval(_timer);
// 修改按钮的文本
_btn.textContent = "开始抽奖";
// 修改展示的样式
_show.className = "show";
}
}
</script>
</body>
</html>
抽奖案例03（外挂，每次显示同一个人）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<!--
需求分析：有一个圆形的抽奖信息展示的地方，有一个按钮可以用来开始/停止抽奖
-->
<style>
*{margin:0px;padding:0px;}
.container{width: 500px;height: 600px;background: #eee;border:solid 2px orange;margin:auto;border-radius:10px;}
.box,.show,.show_active{width:450px;height: 450px;border-radius:50%;}
.box{border:solid 2px orange;padding:10px;margin:10px auto;}
.show{background-color:pink;font-size:70px;line-height:450px;text-align:center;}
.show_active{background-color:red;color:#fff;font-size:70px;line-height:450px;text-align:center;}
#btn{width: 200px;height: 40px;background:pink;display:block;margin:auto;font-size:20px;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div id="show" class="show">
等待抽奖
</div>
</div>
<button id="btn" onclick="playGame()">开始抽奖</button>
</div>
<script>
// 中奖观众
var _names = ['马依依','吕思怡','丁爱全','王聪','张玉','雷晓孟','张莉','赖云露','周俊霞','廖祥科','孙柯','王勇刚','陈芳霖','李晓强','王震','许亚磊','刘惠','袁嘉俊','白玉珊','王肖','王瑞斌','王虽','贾玉龙','向远洁','贾朝阳'];
//获取页面中要使用的标签对象
var _btn = document.getElementById("btn");
var _show = document.getElementById("show");
// 定义一个保存计时器的变量；保存是否开始抽奖的 变量
var _timer;
var _flag = false;
// 定义函数，开始抽奖
function playGame() {
if(!_flag) {
_flag = true;
_timer = setInterval(function() {
// 获取随机下标
var _no = Math.floor(Math.random() * _names.length);
// 获取中奖观众
var _n = _names[_no];
// 展示中奖观众
_show.textContent = _n;
// 修改按钮的文本
_btn.textContent = "停止抽奖";
// 修改展示的样式
_show.className = "show_active";
}, 50);
} else {
_flag = false;
clearInterval(_timer);
// 修改按钮的文本
_btn.textContent = "开始抽奖";
// 修改展示的样式
_show.className = "show";
_show.textContent = '晓孟';
}
}
</script>
</body>
</html>
操作标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS代码操作标签的样式</title>
<style>
#box{height: 200px;background:red;}
</style>
</head>
<body>
<div id="box" style="width:100px;"></div>
<script>
/*操作标签的样式*/
/*增删改查*/
/*获取样式、设置样式*/
var _box = document.getElementById("box");
/**************************************************/
// 获取样式：有两种方式
// 1. 获取样式的值 100px
// 2. 获取样式的数值 100
// 获取标签对象的样式【标签内嵌、页面内嵌、外部样式 都可以获取到】
// 获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
var _h = window.getComputedStyle(_box).height;
var _w = window.getComputedStyle(_box).width;
console.log(_w, _h);
// 兼容IE低版本的获取样式的方式【了解】
// var _h1 = _box.currentStyle.height;
// var _w1 = _box.currentStyle.width;
// 获取样式的数值
var _wvalue = _box.offsetWidth;
var _hvalue = _box.offsetHeight;
console.log(_wvalue, _hvalue);
/**************设置样式************************************/
// 标签对象.style.样式名称 使用这样的语法，是用来操作标签内嵌样式的！
// 给标签设置样式，统一使用 标签对象.style.样式名称 = 样式值;
// _box.style.width = "300px";
</script>
</body>
</html>
飞机飞行进度演示01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>飞机飞行进度演示</title>
<style>
*{margin:0px;padding:0px;}
#nav{position:relative;height:128px;width:1200px;border:solid 1px orange;}
#nav img{position:absolute;left:0;top:0;}
#process{height:128px;background:orange;width:0px;}
</style>
</head>
<body>
<div id="nav">
<div id="process"></div>
</div>
<button onclick="start()">开始飞行</button>
<script>
// 获取飞机对象【图片】
var _plane = document.getElementById("plane");
var _process = document.getElementById("process");
// 定义一个变量，用来存放计时器
var _timer;
function start() {
_timer = setInterval(function() {
// 获取left样式数值
var _left = _plane.offsetLeft;
var _width = _process.offsetWidth;
// 值增加
_left += 10;
_width += 10;
// 边界判断
if(_left >= 1200) {
// 停止计时器函数
clearInterval(_timer);
}
// 设置样式
_plane.style.left = _left + "px";
_process.style.width = _width + "px";
}, 100)
}
</script>
</body>
</html>
飞机飞行进度演示02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>飞机飞行进度演示</title>
<style>
*{margin:0px;padding:0px;}
#nav{position:relative;height:128px;width:1200px;border:solid 1px orange;}
#nav img{position:absolute;left:0;top:0;}
#process{height:128px;background:orange;width:0px;}
</style>
</head>
<body>
<div id="nav">
<div id="process"></div>
</div>
<button onclick="start()">开始飞行</button>
<script>
// 获取飞机对象【图片】
var _plane = document.getElementById("plane");
var _process = document.getElementById("process");
// 定义一个变量，用来存放计时器
var _timer;
function start() {
_timer = setInterval(function() {
// 获取left样式数值
var _left = _plane.offsetLeft;
var _width = _process.offsetWidth;
// 值增加
_left += 10;
_width += 10;
// 设置飞机图片更改的判断
if(_left > 200 && _left <= 1000) {
_plane.setAttribute("src", "images/flying.png")
_process.style.background = "blue";
} else if(_left > 1000) {
_plane.setAttribute("src", "images/flyend.png")
_process.style.background = "red";
}
// 边界判断
if(_left >= 1200) {
// 停止计时器函数
clearInterval(_timer);
}
// 设置样式
_plane.style.left = _left + "px";
_process.style.width = _width + "px";
}, 100)
}
</script>
</body>
</html>
瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0px;padding:0px;}
#container{width: 1200px;margin:auto;position:relative;}
.box{padding:5px;float:left;position:absolute;left:0;top:0;}
.item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
.item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
</div>
<script>
// 网页中的标签和图片加载
// 等待网页中的所有数据加载完成，再执行代码
// window.onload 页面数据加载事件
window.onload = function() {
var _container = document.getElementById("container");
// 获取所有的图片
var _imgs = document.getElementsByClassName("box");
// 计算一行可以存放多少张图片
var _containerWidth = _container.offsetWidth;
var _imgWidth = _imgs[0].offsetWidth;
var _cols = Math.floor(_containerWidth / _imgWidth);
// 声明一个记录高度的数组
var _height = [];
// 遍历所有的图片，开始定位
for(var i = 0; i < _imgs.length; i++) {
if(i < _cols) {
// 保存第一行中每一张图片的高度
_height.push(_imgs[i].offsetHeight);
_imgs[i].style.left = _imgWidth * i + "px";
} else {
// 计算数组中的最小值
var _minHeight = Math.min.apply(null, _height);
console.log(_minHeight);
//getMinIndex获得列表中最小高度的下标，调用下边的函数
var _minIndex = getMinIndex(_minHeight, _height);
console.log(_minIndex);
_imgs[i].style.top = _minHeight + "px";
_imgs[i].style.left = _minIndex * _imgWidth + "px";
// 更新最小高度
_height[_minIndex] += _imgs[i].offsetHeight;
}
}
}
/*value是最小值， arr是这个值所在的数组*/
function getMinIndex(value , arr){
for(var i = 0; i < arr.length; i ++) {
if(value == arr[i]){
return i;
}
}
}
</script>
</body>
</html>
事件操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
JS中的事件
</title>
<!--
事件操作：什么是事件？
事件就是一种发生在网页上的行为；鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为
常见的事件：
鼠标事件
onclick：鼠标单击
ondblclick：鼠标双击
onmouseover：鼠标滑过
onmouseenter：鼠标进入
onmouseleave：鼠标离开
onmouseout：鼠标离开
键盘事件
onkeydown
onkeypress
onkeyup
焦点事件：常用于表单元素标签
onfocus 获取焦点事件【获得光标事件】
onblue 失去焦点事件
onchange 内容修改事件，
事件的绑定方式：
1.标签属性绑定
2.dom元素绑定
-->
</head>
<body>
<button onclick="test1()">第一种绑定方式</button>
<button id="btn">第二种绑定方式</button>
<script>
function test1() {
alert("第一种绑定方式执行的函数");
}
var _btn = document.getElementById("btn")
_btn.onclick = function() {
alert("这是第二种通过dom元素绑定一个事件");
}
</script>
</body>
</html>
鼠标拖拽事件01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#box{position:absolute;width: 200px;height: 200px;background:red;}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var _box = document.getElementById("box");
// event事件对象，可以通过事件对象，获取到鼠标的位置
_box.onmousedown = function(event) {
var _clientX = event.clientX;
var _clientY = event.clientY;
var _boxl = _box.offsetLeft;
var _boxt = _box.offsetTop;
var _left = _clientX - _boxl;
var _top = _clientY - _boxt;
document.onmousemove = function(event) {
var _clientX1 = event.clientX;
var _clientY1 = event.clientY;
var _l = _clientX1 - _left;
var _t = _clientY1 - _top;
_box.style.left = _l + "px";
_box.style.top = _t + "px";
}
}
</script>
</body>
</html>
鼠标拖拽事件02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
#box{position:absolute;width: 200px;height: 200px;background:red;}
</style>
</head>
<body>
<div id="box">
</div>
<script>
var _box = document.getElementById("box");
// event事件对象，可以通过事件对象，获取到鼠标的位置
_box.onmousedown = function(event) {
var _clientX = event.clientX;
var _clientY = event.clientY;
var _boxl = _box.offsetLeft;
var _boxt = _box.offsetTop;
var _left = _clientX - _boxl;
var _top = _clientY - _boxt;
document.onmousemove = function(event) {
var _clientX1 = event.clientX;
var _clientY1 = event.clientY;
var _l = _clientX1 - _left;
var _t = _clientY1 - _top;
_box.style.left = _l + "px";
_box.style.top = _t + "px";
}
document.onmouseup= function(event) {document.onmousemove=null}
}
</script>
</body>
</html>
javascript进阶的更多相关文章
- javascript原型对象与原型链
在javascript中,当系统加载构造函授后 ,会自动在内存中增加一个对象,这个对象就是原型对象.构造函数和原型对象在内存中表现为相互独立,但两者之间还存在联系,构造函数的prototype是原型对 ...
- 三张图较为好理解JavaScript的原型对象与原型链
最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...
- 还在问什么是JavaScript构造函数、实例、原型对象以及原型链？看完这篇你就懂
1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数 构造函数是一种特 ...
- 【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
- JavaScript基础之原型对象和原型链
原型对象 原型对象简单来说就是函数的原型所指向的对象.前面说原型的时候,说了Object.prototype所指对象就是Object(函数)的原型对象.在每个函数的原型对象中,默认会有construc ...
- jacascript 构造函数、原型对象和原型链
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 先梳理一下定义: 我们通常认为 object 是普通对象,function 是函数对象: Function ...
- Javascript中的对象和原型(3)
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型
一 原型对象 原型对象实际上就是构造函数的一个实例对象,和普通的实例对象没有本质上的区别.可以包含特定类型的所有实例的共享属性或者方法.这样,如果我们需要修改所有实例中的属性或者方法,就只需要修改一处 ...
- Javascript中的对象和原型(三)（转载）
在Javascript中的对象和原型(二)中我们提到,用构造函数创建的对象里面,每个对象之间都是独立的,这样就会降低系统资源的利用率,解决这样问题,我们就要用到下面提到的原型对象. 一 原型对象 原型 ...
- Javascript中的对象和原型(一)（转载）
面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...
随机推荐
- 关于IOS开发的基本书籍推荐
1. Sams Teach Yourself iOS 5 Application Development in 24 Hours<img src="https://pic4.z ...
- multiset基础学习，可以有重复类型的多重集合容器
#include <set> #include <iostream> using namespace std; struct Student { char *name; int ...
- RecyclerView 与 Scrollview 搭配使用的两个坑
RecyclerView & Scrollview & wrap_content RecyclerView wrap_content 用android.support.v4.widge ...
- java多继承
众所周知,java面向对象语言中只有单继承的编程语言,也许你会说,通过实现多个接口这种变通的方式达到多继承的目的.没错,你说的对,不过这并不是本片文章要说到的内容,本文要讲到的内容是java中实实在在 ...
- 使用XStream是实现XML与Java对象的转换(1)--简介及入门示例
一.简单介绍 XStream是thoughtworks开发的开源框架,用于实现XML数据于Java对象.Json数据的转换.它不需要schema或其他的mapping文件就可以进行java对象和xml ...
- 关于web页面JApplet打印小票
版权所有 做这个的例子太少,我把我做的示例亮出来 一.先说说需要的版本 1.我用的浏览器只有ie: 火狐只支持52版本以下,并且是java7.java8.chrome不支持 2.applet客户端打印 ...
- Tihinkphp3.2整合最新版阿里大鱼进行短信验证码发送
阿里大鱼最新下载地址:阿里大鱼SDK下载 或者从官网进行下载:阿里大鱼SDK官网下载 下载完成后,将压缩包内的api_sdk文件夹放到ThinkPHP\Library\Vendor目录下,修改文件名为 ...
- 排序算法入门之堆排序（Java实现）
堆排序 在学习了二叉堆(优先队列)以后,我们来看看堆排序.堆排序总的运行时间为O(NlonN). 堆的概念 堆是以数组作为存储结构. 可以看出,它们满足以下规律: 设当前元素在数组中以R[i]表示,那 ...
- Thread.yield和join方法
参考:http://blog.csdn.net/dabing69221/article/details/17426953 一. Thread.yield( )方法: 使当前线程从执行状态(运行状态)变 ...
- Webpack vs Browersify vs SystemJs for SPAs
https://engineering.velocityapp.com/webpack-vs-browersify-vs-systemjs-for-spas-95b349a41fa0 Right no ...