『笔记』JavaScript基础学习笔记 6
DOM（文本对象模型）
（20）鼠标拖拽的事件
拖拽(一、二)
<html>
<head>
<style>
#box1{
width:100px;
height:100px;
background-color:red;
position:absolute;
}
#box2{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
left:200px;
top:200px;
}
</style>
<script>
window.onload = function(){
// 拖拽box1
/* 拖拽的流程：
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
// 当鼠标在被拖拽元素上按下时，开始拖拽
box1.onmousedown = function(event){
// 设置box1捕获所有鼠标按下的事件
// setCapture()只有IE支持，Chrome不支持会报错
// 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
/*if(box1.setCapture){
box1.setCapture();
}*/
box1.setCapture && box1.setCapture();
event = event || window.event;
// div的水平偏移量:鼠标.clientX - 元素.offsetLeft
// div的垂直偏移量:鼠标.clientY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// =当鼠标移动时被拖拽元素跟随鼠标移动
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
// 为元素绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时，被拖拽元素国定在当前位置
// 取消document的onmousemove事件
document.onmousemove = null;
// alert("鼠标松开了");
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
box1.releaseCapture && box1.releaseCapture();
};
// 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为
// 如果不希望这个行为发生，则可以通过return false来取消默认行为
// 但是不支持IE8及以下浏览器
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>box的偏移量=鼠标的偏移量-元素的偏移量
捕获测试
<html>
<head>
<script>
window.onload = function(){
// 分别为两个按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert(1);
};
btn02.onclick = function(){
alert(2);
};
// 设置btn01对鼠标按下相关的事件进行捕获
// 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
btn01.setCapture();
};
</script>
</head>
<body>
<button id="btn01">按钮01</button>
<button id="btn02">按钮02</button>
</body>
</html>拖拽（三）
<html>
<head>
<style>
#box1{
width:100px;
height:100px;
background-color:red;
position:absolute;
}
#box2{
width:100px;
height:100px;
background-color:yellow;
position:absolute;
left:200px;
top:200px;
}
</style>
<script>
window.onload = function(){
// 拖拽box1
/* 拖拽的流程：
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
// 获取box1
var box1 = document.getElementById("box1");
// 获取imh1
var img1 = document.getElementById("img1");
// 开启box1的拖拽
drag(box1);
// 开启box2的拖拽
drag(box2);
// 开启img1的拖拽
drag(img1);
};
// 提取一个专门用来设置拖拽的函数
// 参数：开启拖拽的元素
function drag(obj){
// 当鼠标在被拖拽元素上按下时，开始拖拽
obj.onmousedown = function(event){
// 设置box1捕获所有鼠标按下的事件
// setCapture()只有IE支持，Chrome不支持会报错
// 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上
/*if(box1.setCapture){
box1.setCapture();
}*/
obj.setCapture && obj.setCapture();
event = event || window.event;
// div的水平偏移量:鼠标.clientX - 元素.offsetLeft
// div的垂直偏移量:鼠标.clientY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// =当鼠标移动时被拖拽元素跟随鼠标移动
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box1的位置
obj.style.left = left+"px";
obj.style.top = top+"px";
};
// 为元素绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时，被拖拽元素国定在当前位置
// 取消document的onmousemove事件
document.onmousemove = null;
// alert("鼠标松开了");
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
// 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为
// 如果不希望这个行为发生，则可以通过return false来取消默认行为
// 但是不支持IE8及以下浏览器
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;"
</body>
</html>（21）滚轮的事件
<html>
<head>
<style>
#box1{
width:100px;
height:100px;
background-color:red;
}
</style>
<script>
window.onload = function(){
// 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短
var box1 = document.getElementById("box1");
// 为box1绑定一个鼠标滚动事件
/*onmousewheel鼠标滚轮滚动事件，会在鼠标滚轮滚动时触发，火狐不支持
*
**在火狐中需要使用DOMMouseScroll来绑定滚轮滚动事件
**该事件需要通过addEventListener()函数来绑定
*/
/*function fun(){
alert("我滚了");
};
box1.onmousewheel = fun;
bind(box1,"DOMMouseScroll",fun);
*/
box1.onmousewheel = function(event){
event = event || window.event;
// alert("我滚了");
// 判断鼠标滚轮的滚动方向
// event.wheelDelta 可以获取鼠标滚轮滚动的方向
// 向上滚动为正值，向下滚动为负值
// alert(event.wheelDelta);
// 火狐中不支持wheelDelta
/*火狐中使用event.detail来获取滚轮滚动的方向
**向上滚动为负值，向下滚动为正值
*/
// alert(event.detail);
// 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短
if(event.wheelDelta > 0 || event.detail < 0){
// alert("向上滚");
// 向上滚box1变短
box1.style.height = box1.clientHeight - 10 + "px";
}else{
// alert("向下滚");
// 向下滚box1变长
box1.style.height = box1.clientHeight + 10 + "px";
}
// 使用addEventListener()方法绑定的响应函数，取消默认行为时不能使用return false;
// 需要使用event.preventDefault();来取消，不支持IE8及以下浏览器
event.preventDefault && event.preventDefault();//取消火狐的默认行为
// 当滚轮滚动时，如果浏览器有滚动条，浏览器的滚动条会随着滚动
// 这是浏览器默认行为，可以使用return false;取消默认行为
return false;
};
// 为火狐绑定滚轮事件
bind(box1,"DOMMouseScroll",box1.onmousewheel)
};
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,flase);
}else{
// this是由调用方式决定
// 可以使用匿名函数调用回调函数，这样就可以指定this
// IE8及以下浏览器，加一个on
// obj.attachEvent("on"+eventStr,callback);
obj.attachEvent("on"+eventStr,function(){
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
};
</script>
</head>
<body style="height:2000px">
<div id="box1"></div>
</body>
</html>（22）键盘的事件
<html>
<head>
<script>
window.onload = function(){
/* 键盘事件
onkeydown 按键被按下，如果一直按着某个按键不松手，事件会一直触发
当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快触发，是为了防止误操作的发生
onkeyup 按键被松开，松开一次触发一次
键盘事件一般都会绑定给一些可以获取到焦点的对象或者document
*/
document.onkeydown = function(event){
event = event || window.event;
// 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
// 除了keyCode，事件对象中还提供了几个固定属性
/*altKey 按键Alt是否被按下
**ctrlKy 按键Ctrl是否被按下
**shiftKey 按键Shift是否被按下
如果被按下则返回true否则返回false
*/
// 判断y键是否被按下
// 判断y键和Ctrl键是否被同时按下
if(event.keyCode == 89 && event.ctrlKey){
console.log("按键y和Ctrl都被按下了");
}
};
document.onkeyup = function(){
console.log("按键被松开了");
};
// 获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
event = event || window.event;
console.log("按键被按下");
// 数字的keycode为48-57
// 使文本框中不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57){
// 在文本框中输入内容属于onkeydown的默认行为
// 如果在onkeydown中取消了默认行为，则输入的内容不会出现在文本框中
return false;
}
};
};
</script>
</head>
<body>
<!-- <div style="width:100px;height:100px;background-color:red;" id="box1"></div> -->
<input type="text" />
</body>
</html>键盘移动vid
<html>
<head>
<style>
#box1{
width:100px;
height:100px;
background-color:red;
position:absolute;
}
</style>
<script>
// 使div可以根据不同的方向键向不同的方向移动
var box1 = document.getElementById("box1");
document.onkeydown = function(event){
event = event || window.event;
// 定义一个变量来表示移动的速度
var speed = 20;
// 当用户按了Ctrl以后速度加快
if(event.ctrlKey){
spend = 200;
}
// keyCode 37左 38上 39右 40下
switch(event.keyCode){
case 37:
// alert("向左");
box1.style.left = box1.offsetLeft -speed +"px";
break;
case 39:
// alert("向右");
box1.style.left = box1.offsetLeft +speed +"px";
break;
case 38:
// alert("向上");
box1.style.top = box1.offsetTop -speed +"px";
break;
case 40:
// alert("向下");
box1.style.top = box1.offsetTop +speed +"px";
break;
}
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>{nextPage/}
BOM（浏览器对象模型）
- BOM可以通过JS来操作浏览器
- 在BOM中提供了一组对象，用来完成对浏览器的操作
- BOM对象
{alert type="success"}
Window代表的是整个浏览器的窗口，同时也是网页中的全局对象Navigator代表当前浏览器的信息，通过该对象可以识别不同的浏览器Location代表当前浏览器的地址栏信息，通过location可以获取地址栏信息或者操作浏览器跳转页面History代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效
Screen代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息- 这些BOM对象在浏览器中都是作为window对象的属性保存的
{/alert}
// console.log(window.navigator);
console.log(navigator);
console.log(location);
console.log(history);一、Navigator（浏览器信息）
代表当前浏览器的信息，通过该对象可以识别不同的浏览器
- 由于历史原因（网景公司倒闭了），Navigator对象中的大部分属性都已经不能识别浏览器了
- 一般只会使用userAgent来判断浏览器的信息
- userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
// appCodeName 返回浏览器名称的代码
// appName 返回浏览器的名称
// userAgent 返回一个字符串来描述浏览器的信息
// alert(navigator.appName);
// 在IE11中已经将微软和IE相关的标识都去除了，所以基本不能通过userAgent来识别浏览器是不是IE了
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
alert("我是火狐");
}else if(/chrome/i.test(ua)){
alert("我是Chrome");
}else if(/msie/i.test(ua)){
alert("我是IE浏览器");
}else if("ActiveXObject" in window){
alert("你是IE11，我已经抓住你了");
}
// 如果不能通过userAgent来判断浏览器信息，还可以通过一些浏览器中特有的对象来判断浏览器的信息
// 比如：ActiveXObject
// alert("ActiveXObject" in window);
if("ActiveXObject" in window){
alert("你是IE，我已经抓住你了");
}else{
alert("你不是IE");
}
二、History（历史记录）
代表浏览器的历史记录，可以通过该对象来操作浏览器向前或向后翻页
<html>
<head>
<script>
// 可以通过History来操作浏览器向前或向后翻页
// length属性可以获取到当次访问的连接数量
// alert(history.length);
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
// alert(history.length);
// back()方法可以用来回退到上一个页面，作用和浏览器的返回按钮一样
// history.back();
// forward()方法可以用来跳转到下一个页面，作用和浏览器的返回按钮一样
// history.forward();
// go()方法可以跳转到指定页面，需要一个整数作为参数
// 1:表示向前跳转一个页面，相当于forward()
// 2:表示向前跳转两个页面
// -1:表示向后跳转一个页面，相当于back()
// -2:表示向后跳转两个页面
history.go(1);
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<h1>History</h1>
<a href="">去下一个页面</a>
</body>
</html>三、Location（浏览器地址栏）
该对象中封装了浏览器的地址栏的信息
<html>
<head>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
// 如果直接打印Location则可以获取到地址栏的信息（当前页面的完整路径）
// alert("location");
// 如果直接将location修改为一个完整的路径（或相对路径），则页面会自动跳转到该路径，并且会生成相应的历史记录
// location = "https://www.baidu.com";
// assign()用来跳转到其他页面，作用和直接修改location一样
// location.assign("https://www.baidu.com");
// reload()重新加载当前页面,作用和刷新按钮一样
// 在方法中传递一个true作为参数，则会强制清空缓存刷新
// location.reload(true);
// replace()可以使用一个新的页面替换当前页面，调用完毕也会跳转到新的页面，但是不会生成历史记录（不能使用回退功能）
location.replace("https://www.baidu.com");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
</body>
</html>四、Window（浏览器的窗口）
window的方法
1、 定时调用
<html>
<head>
<script>
window.onload = function(){
var count = document.getElementById("count");
// 使count中的内容自动切换
// js的程序执行速度是非常快的
// 如果希望一段程序可以每间隔一段时间执行一次，可以使用定时调用
/*for(var i=0; i<100; i++){
count.innerHTML = i;
alert("点我");
}*/
// setInterval()定时调用：可以将一个函数每隔一段时间执行一次
// 参数：1.回调函数，该函数会每隔一段时间被调用一次，2.每次调用回调函数的时间单位为毫秒
// 返回值：返回一个Number类型的数据,这个数字用来作为定时器的唯一标识
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
// 关闭定时器
clearIntervol(timer);
}
},100);
// console.log(timer);
// clearIntervol()可以用来关闭一个定时器
// 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
// clearIntervol(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>（1）切换图片练习
<html>
<head>
<script>
window.onload = function(){
// 使图片可以自动切换
// 获取img标签
var img1 = document.getElementById("img1");
// 创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
// 创建一个变量来保存当前图片的索引
var index = 0;
// 定义一个变量，用来保存定时器的标识
var timer;
// 为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 每点击一次按钮就会开启一个定时器，点击多次就会开启多个定时器，会导致切换速度加快，并且只能关闭最后一次开启的定时器
// 在开启定时器之前，需要将当前元素上的其他定时器关闭，避免开启多个定时器
clearInterval(timer);
// 开启定时器来切换图片
timer = setInterval(function(){
// 使索引自增
index++;
// 判断索引是否超过最大索引
/*if(index >= imgArr.length){
// 则将index设置为0，使其循环切换
index = 0;
}*/
// index = index % imgArr.length;
index %= imgArr.length; //与上面for循环功能一样
// 修改img1的src属性
img1.src = imgArr[index];
},1000);
};
// 为btn02绑定一个单机响应函数
var btn02 = document.getElementById("btn01");
btn02.onclick = function(){
// 点击按钮以后停止图片的自动切换，关闭定时器
// clearInterval()可以接收任意参数，如果参数是一个有效的定时器标识则停止对应的定时器，如果参数不是有效的标识则什么也不做
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" />
<br/><br/>
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>（2）修改div移动练习
<html>
<head>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
//使div可以根据不同的方向键向不同的方向移动
/*
* 按左键，div向左移
* 按右键，div向右移
* 。。。
*/
window.onload = function(){
//定义一个变量，来表示移动的速度
var speed = 10;
//创建一个变量表示方向
//通过修改dir来影响移动的方向
var dir = 0;
//开启一个定时器，来控制div的移动
setInterval(function(){
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch(dir){
case 37:
//alert("向左"); left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
//alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
},30);
//为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
//当用户按了ctrl以后，速度加快
if(event.ctrlKey){
speed = 500;
}else{
speed = 10;
}
//使dir等于按键的值
dir = event.keyCode;
};
//当按键松开时，div不再移动
document.onkeyup = function(){
//设置方向为0
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>2、 延时调用
<html>
<head>
<script type="text/javascript">
var num = 1;
//开启一个定时器
/*setInterval(function(){
console.log(num++);
},3000);*/
/*延时调用，
* 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
* 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
* 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择*/
var timer = setTimeout(function(){
console.log(num++);
},3000);
//使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>（1）定时器的应用一
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//定义一个变量，用来保存定时器的标识
var timer;
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
//关闭上一个定时器
clearInterval(timer);
//开启一个定时器，用来执行动画效果
timer = setInterval(function(){
//获取box1的原来的left值
var oldValue = parseInt(getStyle(box1,"left"));
//在旧值的基础上增加
var newValue = oldValue + 1;
//判断newValue是否大于800
if(newValue > 800){
newValue = 800;
}
//将新值设置给box1
box1.style.left = newValue + "px";
//当元素移动到800px时，使其停止执行动画
if(newValue == 800){
//达到目标，关闭定时器
clearInterval(timer);
}
},30);
};
};
/*定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名 */
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
};
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>{nextPage/}
（2）定时器的应用二
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取box1
var box1 = document.getElementById("box1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function(){
move(box1 , 800 , 10);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
move(box1 , 0 , 10);
};
};
//定义一个变量，用来保存定时器的标识
var timer;
//尝试创建一个可以执行简单动画的函数
/*参数：
* obj:要执行动画的对象
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动) */
function move(obj , target ,speed){
//关闭上一个定时器
clearInterval(timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj,"left"));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target){
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
timer = setInterval(function(){
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj,"left"));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
newValue = target;
}
//将新值设置给box1
obj.style.left = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target){
//达到目标，关闭定时器
clearInterval(timer);
}
},30);
}
/*定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名 */
function getStyle(obj , name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
};
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<br /><br />
<div id="box1"></div>
<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>（3）定时器的应用三
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#box1{
width:100px;
height:100px;
background:red;
position:absolute;
left:0;
}
#box2{
width:100px;
height:100px;
background:blue;
position:absolute;
left:0;
top:200px;
}
</style>
<!-- 引入tools工具，调用切换动画函数 -->
<script src="js/tools.js"></script>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
// 点击按钮后使box1向右移动（left增大）
btn01.onclick = function(){
move(box1,"left",800,20);
};
// 点击按钮后使box1向左移动（left减小）
btn02.onclick = function(){
move(box1,"left",0,10);
};
// 获取btn03
var btn03 = document.getElementById("btn03");
var box2 = document.getElementById("box2");
btn03.onclick = function(){
move(box2,"left",800,10);
};
// 获取btn04
var btn04 = document.getElementById("btn04");
var box2 = document.getElementById("box2");
btn04.onclick = function(){
// move(box2,"top",800,10);
// move(box2,"height",800,10);
move(box2,"width",800,10,function(){
// alert("动画执行完了");
move(box2,"height",400,10,function(){
move(box2,"top",0,10,function(){
move(box2,"width",100,10,function(){
move(box2,"height",100,10,function(){
});
});
});
});
});
};
};
// 定义一个变量用来保存定时器的标识
// 目前定时器由全局变量timer保存，所有正在执行的定时器都在timer变量中保存
// var timer
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br/><br/>
<div id="box1"></div>
<div id="box2"></div>
<div style="position:absolute;left:800px;top:0;width:0;height:1000px;border-left:1px black solid;"></div>
</body>
</html>tools.js（用于存放工具程序）
// 尝试创建一个可以执行简单动画的函数
// 参数:obj:要执行动画的对象
// attr:要执行动画的样式，比如left height top
// target:执行动画的目标位置
// speed:移动的速度（正数向右移动，负数向左移动）
// callback:回调函数，将会在动画执行完毕以后执行
function move(obj,attr,target,speed,callback){
// 关闭上一个定时器
clearInterval(obj.timer);
// 获取box1目前的位置
var current = parseInt(getStyle(obj,attr));
// 判断速度speed的正负值
// 如果从0向800移动则speed为正，如果从800向0移动则speed为负
if(current > target){
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器用来执行动画效果
// 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function(){
// 获取box1原来的left值
var oldValue = parseInt(getStyle(obj,attr));
// 在旧值的基础上增加,给box添加移动速度
var newValue = oldValue + speed;
// 向左移动时需要判断newValue是否小于target
// 向右移动时需要判断newValue是否大于于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
newValue = target;
}
// 将新值设置给obj
obj.style[attr] = newValue + "px";
// 当box1移动到了0px时，使其停止执行动画
if(newValue == target){
// 达到目标关闭定时器
clearInterval(obj.timer);
// 动画执行完毕，调用回调函数
callback && callback();
}
},30);
};
/* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名*/
function getStyle(obj,name){
if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
};{nextPage/}
3、 轮播图的改进
<html>
<head>
<style>
*{
margin:0;
padding:0;
}
#outer{
width:520px;
height:333px;
margin:50px auto;
background-color:greenyellow;
padding:10px 0;
/* 开启相对定位 */
position:relative;
/* 裁剪溢出的内容 */
overflow:hidden;
}
/* 设置imgList */
#imgList{
/* 去除ul的项目符号 */
list-style:none;
/* width:2600px; */
/* 开启绝对定位 */
position:absolute;
/* 设置偏移量,默认为0 */
/* 每向左移动520px可以切换下一张图片 */
left:0;
}
/* 设置列表中li */
#imgList li{
/* 设置浮动 */
float:left;
/* 设置左右外边距 */
margin:0 10px;
}
/* 设置导航按钮 */
#navDiv{
/* 开启绝对定位 */
position:absolute;
/* 设置位置 */
bottom:15px;
/* 设置居中显示 */
/* left:197px; */
}
#navDiv a{
/* 设置超链接的浮动 */
float:left;
width:15px;
height:15px;
background-color:red;
/* 设置左右外边距 */
margin:0 5px;
/* 设置透明 */
opacity:0.5;
/* 兼容IE8透明 */
filter:alpha(opacity=50);
}
/* 设置鼠标移入的效果 */
#imgDiv a:hover{
background-color:black;
}
</style>
<!-- 引入tools工具，调用切换动画函数 -->
<script src="js/tools.js"></script>
<script>
window.onload = function(){
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 520*imgArr.length + "px";
// 设置导航按钮居中
// 获取navDiv
var navDiv = document.getElementById("navDiv");
// 获取outher
var outer = document.getElementById("outer");
// 设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px";
// 默认显示图片的索引
var index = 0;
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 设置默认选中的效果
allA[index].style.backgroundColor = "black";
// 点击超链接切换到指定的图片
// 为所有的超链接都绑定一个单击响应函数
for(var i=0; i<allA.length; i++){
// 为每一个超链接都添加一个num属性
allA[i].num = i;
// 为超链接绑定单击响应函数
allA[i].onclick = function(){
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击的超链接的索引
// alert(this.num);
index = this.num;
// 切换图片
// imgList.style.laft = -520*index + "px";
// 设置选中的a
setA();
// 使用move函数来切换图片
move(imgList,"left",-520*index,20,function(){
// 点击切换动画执行完毕，开启自动切换动画
autoChange();
});
};
}
// 开启自动切换图片，调用autoChange函数
autoChange();
// 创建一个方法来设置选中的a
function setA(){
// 判断当前索引是否为最后一张图片
if(index >= imgArr.length - 1){
// 则将index设置为0
index = 0;
// 此时显示的是最后一张，而最后一张和第一张是一模一样的
// 通过CSS将最后一张切换为第一张
imgList.style.left = 0;
}
for(var i=0; i<allA.length; i++){
// 遍历所有的a并将背景颜色设为空，去掉内联样式，显示外部样式
allA[i].style.backgroundColor = "";
}
// 将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
};
// 定义一个自动切换的定时器的标识
var timer;
// 创建一个函数来开启自动切换图片
function autoChange(){
// 开启一个定时器用来定时切换图片
timer = setInterval(function(){
// 使索引自增
index++;
// 判断index的值并改变index的值，形成循环
index %= imgArr.length;
// 执行动画切换
move(imgList,"left",-520*index,20,function(){
// 修改导航按钮
setA();
});
},3000);
};
};
</script>
</head>
<body>
<!-- 创建一个外部div来作为大容器 -->
<div id="outer">
<!-- 创建一个ul放置图片 -->
<ul id="imgList">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>{nextPage/}
4、类的操作
<html>
<head>
<style>
.b1{
width:100px;
height:100px;
background-color:yellowgreen;
}
.b2{
height:200px;
background-color:red;
}
</style>
<script>
window.onload = function(){
// 获取box
var box = document.getElementById("box");
// 获取btn01
var btn01 = document.getElementById("btn01");
// 为btn01绑定单击响应函数
btn01.onclick = function(){
// 修改box的样式
// 通过style属性来修改元素的样式，每修改一个样式浏览器就需要重新渲染一次
// 这样执行的性能是比较差的，而且这种方式当需要修改多个样式时也比较麻烦
/*box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor:"red";*/
// 一行代码可以修改多个样式
// 修改box的class属性
// 可以通过修改元素的class属性来间接修改样式
// 这样只需修改一次即可同时修改多个样式，同时浏览器只需重新渲染一次，性能会提高一些
// 这种方式可以使表现（css）和行为（js）进一步分离
// b2会替换b1的样式
// box.className = "b2";
// 在b1的基础上加上b2的样式（添加一个空格防止b1和b2拼串为b1b2，应为b1 b2）
// box.className += " b2"
// addClass(box,"b2");
// alert(hasClass(box,"heelo"));
// removeClass(box,"b2");
toggleClass(box,"b2");
};
};
// 定义一个函数来向一个元素添加指定的class属性值
/*参数：
obj 要添加class属性的元素
cn 要添加的class值*/
function addClass(obj,cn){
// 检查obj中是否含有cn
if(!hasClass(obj,cn)){
// 如果没有cn则添加cn（添加一个空格防止直接拼串）
obj.className += " "+cn;
}
};
// 判断一个元素中是否含有指定的class属性值
/*参数
obj 要添加class属性的元素
cn 要添加的class值
如果有该class值则返回true，否则返回false*/
function hasClass(obj,cn){
// 判断obj中是否有cn这个class值
// 创建一个正则表达式
// var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
};
// 删除一个元素中指定的class属性
function removeClass(obj,cn){
// 创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
// 删除class
obj.className = obj.className.replace(reg,"");
};
// toggleClass用来切换一个类
// 如果元素中有指定类则删除，没有则添加
function toggleClass(obj,cn){
// 判断obj中是否含有cn
if(hasClass(obj,cn)){
// 有则删除
removeClass(obj,cn);
}else{
// 没有则添加
addClass(obj,cn);
}
};
</script>
</head>
<body>
<button id="btn01">点击按钮修改box的样式</button>
<div id="box" class="b1"></div>
</body>
</html>tools.js（工具函数）
// 尝试创建一个可以执行简单动画的函数
// 参数:obj:要执行动画的对象
// attr:要执行动画的样式，比如left height top
// target:执行动画的目标位置
// speed:移动的速度（正数向右移动，负数向左移动）
// callback:回调函数，将会在动画执行完毕以后执行
function move(obj, attr, target, speed, callback) {
// 关闭上一个定时器
clearInterval(obj.timer);
// 获取box1目前的位置
var current = parseInt(getStyle(obj, attr));
// 判断速度speed的正负值
// 如果从0向800移动则speed为正，如果从800向0移动则speed为负
if (current > target) {
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器用来执行动画效果
// 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function () {
// 获取box1原来的left值
var oldValue = parseInt(getStyle(obj, attr));
// 在旧值的基础上增加,给box添加移动速度
var newValue = oldValue + speed;
// 向左移动时需要判断newValue是否小于target
// 向右移动时需要判断newValue是否大于于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给obj
obj.style[attr] = newValue + "px";
// 当box1移动到了0px时，使其停止执行动画
if (newValue == target) {
// 达到目标关闭定时器
clearInterval(obj.timer);
// 动画执行完毕，调用回调函数
callback && callback();
}
}, 30);
};
/* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
};
// 定义一个函数来向一个元素添加指定的class属性值
/*参数：
obj 要添加class属性的元素
cn 要添加的class值*/
function addClass(obj, cn) {
// 检查obj中是否含有cn
if (!hasClass(obj, cn)) {
// 如果没有cn则添加cn（添加一个空格防止直接拼串）
obj.className += " " + cn;
}
};
// 判断一个元素中是否含有指定的class属性值
/*参数
obj 要添加class属性的元素
cn 要添加的class值
如果有该class值则返回true，否则返回false*/
function hasClass(obj, cn) {
// 判断obj中是否有cn这个class值
// 创建一个正则表达式
// var reg = /\bb2\b/;
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
};
// 删除一个元素中指定的class属性
function removeClass(obj, cn) {
// 创建一个正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
// 删除class
obj.className = obj.className.replace(reg, "");
};
// toggleClass用来切换一个类
// 如果元素中有指定类则删除，没有则添加
function toggleClass(obj, cn) {
// 判断obj中是否含有cn
if (hasClass(obj, cn)) {
// 有则删除
removeClass(obj, cn);
} else {
// 没有则添加
addClass(obj, cn);
}
};5、二级菜单完善
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<link rel="stylesheet" href="css/sdmenu.css">
<script src="js/tools.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180%;
}
</style>
<script>
window.onload = function () {
// 每个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，没有则为展开状态
// 点击菜单切换菜单的显示状态
// 获取所以class为menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
// 定义一个变量来保存当前打开的菜单
var openDiv = menuSpan[0].parentNode;
// 为span绑定单击响应函数
for (var i = 0; i < menuSpan.length; i++) {
menuSpan[i].onclick = function () {
// this代表当前点击的span
// 获取span的父元素
var parentDiv = this.parentNode;
// 关闭parenDiv,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加
toggleClass(parentDiv, "collapsed");
// 判断openDiv和parentDiv是否相同
if (openDiv != parentDiv && !hasClass(openDiv,"collapsed")) {
// 不相等才添加
// 打开菜单后给之前的菜单添加collapsed来关闭该菜单
// addClass(openDiv, "collapsed");
// 为了统一处理过渡动画，将addClass改为toggleClass
// 此处toggleClass()不需要有移除功能
toggleClass(openDiv, "collapsed");
}
// 修改openDiv为当前打开的菜单
openDiv = parentDiv;
};
}
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">图像优化</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">图像优化</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
</div>
</body>
</html>二级菜单动画过渡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<link rel="stylesheet" href="css/sdmenu.css">
<script src="js/tools.js"></script>
<style>
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180%;
}
</style>
<script>
window.onload = function () {
// 每个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，没有则为展开状态
// 点击菜单切换菜单的显示状态
// 获取所以class为menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
// 定义一个变量来保存当前打开的菜单
var openDiv = menuSpan[0].parentNode;
// 为span绑定单击响应函数
for (var i = 0; i < menuSpan.length; i++) {
menuSpan[i].onclick = function () {
// this代表当前点击的span
// 获取span的父元素
var parentDiv = this.parentNode;
// 切换菜单的显示状态
toggleMenu(parentDiv);
// 判断openDiv和parentDiv是否相同
if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) {
// 不相等才添加
// 打开菜单后给之前的菜单添加collapsed来关闭该菜单
// addClass(openDiv, "collapsed");
// 为了统一处理过渡动画，将addClass改为toggleClass
// 此处toggleClass()不需要有移除功能
// toggleClass(openDiv, "collapsed");
// 切换菜单的显示状态
toggleMenu(openDiv);
}
// 修改openDiv为当前打开的菜单
openDiv = parentDiv;
};
}
// 用来切换菜单折叠和显示状态
function toggleMenu(obj) {
// 在切换类之前获取元素的高度
var begin = obj.offsetHeight;
// 切换parenDiv的显示,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加
toggleClass(obj, "collapsed");
// 在切换类之后获取一个高度
var end = obj.offsetHeight;
// console.log("begin=" + begin + ",end" + end);
// 动画效果就是从begin向end过渡
// 将元素的高度充值为begin
obj.style.height = begin + "px";
// 执行动画，从begin向end过渡
move(obj, "height", end, 10, function () {
// 动画执行完毕，内联样式没有存在的意义，需要删除
obj.style.height = "";
});
};
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">图像优化</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">图像优化</a>
<a href="#">邮件</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
</div>
</body>
</html>五、JSON
<script>
// - JS中的对象只有JS认识，其他的语言都不认识
// JSON就是一个特殊格式的字符串，这个字符串可以被任何语言所识别
// 并可以转换为任意语言中的对象，JSON在开发中主要用来进行数据的交互
// JSON
// - JavaScript Object Notation JS对象表示法
// - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一样
/*
JSON分类：
1、对象{}
2、数组[]
JSON中允许的值：
1、字符串
2、数值
3、布尔值
4、null
5、对象
6、数组
*/
// 创建一个对象
var obj = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
// 创建一个数组
var arr = '[1,2,3,"hello",true]';
// console.log(obj);
var onj2 = '{"arr":[1,2,3]}';
var arr2 = '[{ "name": "孙悟空", "age": 18},{ "name": "孙悟空", "age": 18}]'
/*
将JSON字符串转换为JS中的对象
在JS中提供了一个工具类叫做JSON
这个对象可以将JSON转为JS对象，也可以将JS对象转换为JSON
*/
var json = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
//JSON --> js对象
// JSON.parse()可以将JSON字符串转为JS对象
// 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象
var o = JSON.parse(json);
var o2 = JSON.parse(arr);
// console.log(o.gender);
// console.log(02[1]);
var obj3 = {name:"猪八戒",age:28,gender:"男"};
// JS对象 -->JSON
// JSON.stringify()可以将一个JS对象转换为JSON字符串
// 需要一个JS对象作为参数，会返回一个JSON字符串
var str = JSON.stringify(obj3);
console.log(str);
// JSON这个对象在IE7及以下不支持，会报错
// 必须加"",不然会报错
var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';
JSON.parse(str3);
</script>JSON的兼容性
<!-- 如果需要兼容IE7及以下，则可以通过一个外部JS文件来处理 -->
<script src="js/json2.js"></script>
<script>
var str = '{ "name": "孙悟空", "age": 18, "gender": "男" }';
// eval()可以用来执行一段字符串形式的JS代码，并返回执行结果
// 如果使用eval()执行的字符串中含有{}，它会将{}当成是代码块
// 如果不希望将其当成代码块解析，则需在字符串前后各加一个()
// eval()这个功能很强大，可以直接执行一个字符串中的JS代码
// 但是在开发中尽量不要使用，性能较差，且具有安全隐患（用户也可以传入JS代码）
var str2 = "alert('hello')";
// eval(str2);
var obj = eval("("+str+")");
// console.log(obj);
</script>当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »