文章目录
滚轮事件
onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性。
在火狐中需要使用DOMMouseScroll来绑定滚动事件，且该事件需要通过addEventListener()函数来绑定。- 取消默认行为
当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为。如果不希望发生，则可以取消默认行为
使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false，需要使用event.preventDefault();来取消默认行为，但是IE8不支持event.preventDefault();如果直接使用会报错 - 判断鼠标滚轮滚动的方向
event.wheelData可以获取鼠标滚轮滚动的方向，向上滚是120，向下滚是-120。wheelData这个值我们不看大小，只看正负。wheelData这个属性火狐中不支持，在火狐中使用event.detail来获取滚动的方向，向上滚是-3，向下滚是3。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 当鼠标滚轮向下滚动时，box1变长
* 当鼠标滚轮向上滚动时，box1变短
*/
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标滚轮滚动的事件
box1.onmousewheel = function(event){
event = event || window.event;
//判断鼠标滚轮滚动的方向
//event.wheelData 可以获取鼠标滚轮滚动的方向
//wheelData这个值我们不看大小，只看正负
//wheelData这个属性火狐中不支持
//判断鼠标滚轮滚动的方向
if(event.wheelDelta>0 || event.detail<0){
//向上滚，box1变短
box1.style.height = box1.clientHeight - 10 + "px";
}else{
//向下滚，box1变长
box1.style.height = box1.clientHeight + 10 + "px";
}
/*
* 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventDefault();
* 但是IE8不支持event.preventDefault();如果直接使用会报错
*/
event.preventDefault() && event.preventDefault();
return false;
};
//为火狐绑定滚轮事件
bind(box1,"DOMMouseScroll",box1.onmousewheel);
};
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
键盘事件
键盘事件一般都会被绑定给一些可以获取到焦点的对象(<input/>标签)，或者是document
1. 键盘事件
①onkeydown：按键被按下
- 对于onkeydown来说，如果一直按着某一个键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快，这种设计是为了防止误操作的发生
② onkeyup： 按键被松开
2.键盘事件对象的属性
①可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下。
② 除了keyCode，事件对象还提供了几个属性 altKey、ctrlKey、shiftKey这三个属性用来判断alt、ctrl、shift是否被按下，如果按下返回true，否则返回false
示例：判断 y 和 ctrl 是否同时被按下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
document.onkeydown = function(event){
event = event || window.event;
if(event.keyCode==89 && event.ctrlKey){
console.log("ctrl和y同时被按下");
}
};
};
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
示例2：使文本框中不能输入数字，数字：48-57
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
if(event.keyCode >=48 && event.keyCode <=57){
//在文本框中输入内容，属于onKeydown的默认行为
//如果在onKeydown中取消默认行为，则输入的内容不会出现在文本框中
return false;
}
};
};
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
键盘移动div(练习)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
//为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
//定义一个变量，来表示移动的速度
var speed = 10;
//当用户按了ctrl以后速度加快
if(event.ctrlKey){
speed = 50;
}
/*
* 37 左
* 38 上
* 39 右
* 40 下
*/
switch (event.keyCode){
case 37:
//向左，left值减小
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
//向右
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
//向上，top减小
box1.style.left = box1.offsetTop - speed +"px";
break;
case 40:
//向下
box1.style.left = box1.offsetTop + speed +"px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
BOM
- BOM：浏览器对象模型。BOM可以使我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
- BOM对象：
①window
代表的是整个浏览器的窗口，同时window也是网页中的全局对象
②Navigator
代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
③Location
代表的是当前浏览器的地址栏信息，通过该对象可以获取地址栏信息，或者操作浏览器向前或向后跳转页面
④History
代表的是浏览器的历史记录，可以通过该对象来操作历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效
⑤Screen
代表用户的屏幕信息，通过该对象可以获取到用户的显示器相关信息
注意： 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
Navigator
- 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
- 由于历史原因，Navigator对象中大部分属性都已经不能帮助我们识别了
- 一般我们会使用
userAgent来判断浏览器信息，userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
火狐的userAgent：
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0
Chrome的userAgent：
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36
IE11的userAgent：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 Edg/93.0.961.44
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
if("ActiveXObject" in window){
alert("我是IE");
}else{
alert("我不是IE");
}
History
对象可以用来操作浏览器向前或向后翻页
length属性，可以获取到当次访问链接的数量back()方法，可以用来回退到上一个页面，作用和浏览器的回退按钮一样。forward()方法，可以跳转到下一个页面，作用和浏览器的前进按钮一样go()方法，可以用来跳转到指定页面。
它需要一个整数来作为参数：
1：表示向前跳转一个页面，相当于forward
2：表示向前跳转两个页面
-1：表示向后跳转一个页面
-2：表示向后跳转两个页面
Location
该对象中封装了浏览器的地址栏信息
- 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
alert(location);
- 如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录。
location = "http://www.baidu.com";
location = "04_BOM.html";
assign()方法，用来跳转到其他页面，作用和直接修改location一样。
location.assign("http://www.baidu.com");
-
reload()方法，用于重新加载页面，作用和刷新按钮一样。
如果在方法中传递一个true作为参数，则会强制清空缓存刷新页面。 -
replace()方法，可以使用一个新的页面替换当前页面调用完毕也会跳转页面，不会生成历史记录，不能使用回退按钮回退。
定时调用
如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用。
-
setInterval()方法，定时调用，可以将一个函数每隔一段时间执行一次。参数：
第一个参数，回调函数，每隔一段时间被调用一次
第二个函数，每次调用间隔的时间，单位是毫秒
返回值：
返回一个Number类型的数据，这个数字用来作为定时器的唯一标识 -
clearInterval()方法，可以用来关闭一个定时器。
方法中需要一个定时器的标志作为参数，这样将关闭标识对应的定时器。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取count
var count = document.getElementById("count");
//使count中的内容自动切换
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 11){
clearInterval(timer);
}
},100);
};
</script>
</head>
<body>
<h1 id="count">1</h1>
</body>
</html>
切换图片（练习）
在开启定时器前，需要将当前元素上的其他定时器关闭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
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;
//定义一个timer，用来保存定时器的标识
var timer;
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器，
* 点击多次就会开启多个定时器，这就会导致图片的的切换数度过快，
* 并且我们只能关闭最后一次开启的定时器
*
* 在开启定时器前，需要将当前元素上的其他定时器关闭
*/
clearInterval(timer);
/*
* 开启一个定时器，来自动切换图片
*/
timer = setInterval(function(){
//使索引自增
index++;
//判断索引是否超过最大索引
/* if(index >= imgArr.length){
index = 0;
}
*/
index = index % imgArr.length;//与上面的写法作用相同
//修改img1的src属性
img1.src = imgArr[index];
},1000);
};
//获取btn02
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//单击按钮后，停止图片的自动切换，关闭定时器
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" />
<br /><br />
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
注意：判断索引是否超过最大索引
方式一：
if(index >= imgArr.length){
index = 0;
}
方式二：
index = index % imgArr.length;
方式一与方式二的作用相同。
修改（键盘移动div练习）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: pink;
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>
延时调用
延时调用一个函数不会马上执行，而是隔一段时间以后执行
①setTimeout()方法，开启一个延时调用
②clearTimeout()方法，关闭一个延时调用
延时调用和定时的区别：
- 定时调用会执行多次，延时调用只会执行一次
- 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己的需求去选择。
<script type="text/javascript">
/*
* 延时调用：
* 延时调用一个函数不会马上执行，而是隔一段时间以后执行
*
*
* 延时调用和定时的区别：
* 定时调用会执行多次，延时调用只会执行一次
*
* 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己的需求去选择
*/
var num = 1;
//setTimeout()开启一个延时调用
var timer = setTimeout(function(){
console.log(num++);
},3000);
</script>
定时器的应用
- 创建一个可以执行简单动画的函数
参数：
obj:要执行动画的对象
attr:要执行动画的样式，比如：left top width height
target:执行动画的目标位置
speed:移动的速度(正数向右移动，负数向左移动)
callback:回调函数，这个函数将会在动画执行完毕以后执行
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
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[attr] = newValue + "px";
//当元素移动到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];
}
}
示例1：点击按钮以后box1向右移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*
* 若不设置left，IE中会显示left为auto
*/
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 + 11 ;
//判断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>
示例2：
<script type="text/javascript" src="js/tools.js"></script>中的js/tools.js文件为示例定义的两个函数
js/tools.js文件：
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
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[attr] = newValue + "px";
//当元素移动到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];
}
}
定时器的应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top: 200px;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<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 ,"left", 800 , 20);
};
//点击按钮以后，使box1向左移动（left值减小）
btn02.onclick = function(){
move(box1 ,"left", 0 , 10);
};
//获取btn03
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
move(box2 , "left",800 , 10);
};
//测试按钮
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//move(box2 ,"width", 800 , 10);
//move(box2 ,"top", 800 , 10);
//move(box2 ,"height", 800 , 10);
move(box2 , "width" , 800 , 10 , function(){
move(box2 , "height" , 400 , 10 , function(){
move(box2 , "top" , 0 , 10 , function(){
move(box2 , "width" , 100 , 10 , function(){
});
});
});
});
};
};
</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="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div>
</body>
</html>
轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*设置outer样式*/
#outer{
width: 520px;
height: 333px;
/*居中*/
margin: 50px auto;
background-color: pink;
padding: 10px 0;
position: relative;
/*裁剪溢出的内容*/
overflow: hidden;
}
/*设置imgList*/
#imgList{
/*去除项目符号*/
list-style: none;
position: absolute;
}
/*设置图片中的li*/
#imgList li{
float: left;
margin: 0 10px;
}
/*设置导航按钮*/
#navDiv{
/*开启绝对定位*/
position: absolute;
bottom: 15px;
}
#navDiv a{
float: left;
width: 10px;
height: 10px;
background-color: greenyellow;
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
/*设置鼠标移入效果*/
#navDiv a:hover{
background-color: black;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function(){
var imgList = document.getElementById("imgList");
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 520*imgArr.length + "px";
//设置导航按钮居中
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
//设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//默认显示图片索引
var index = 0;
var allA = document.getElementsByTagName("a");
//默认选中效果
allA[index].style.backgroundColor = "black";
//点击超链接切换到指定的图片
//执行顺序：先执行for循环，再执行单击响应函数
for(var i=0; i<allA.length ;i++){
//为每个超链接都添加一个num属性
allA[i].num = i;
allA[i].onclick = function(){
//关闭自动切换的定时器
clearInterval(timer);
//获取点击超链接的索引并将其设置为index
index = this.num;
//切换图片
/* index left
* 第一张 0 0
* 第二张 1 -520
* 第三张 2 -1040
*/
// imgList.style.left = -520*index +"px";
//设置选中的a
setA();
move(imgList,"left",-520*index,20,function(){
//动画执行完毕，开启自动切换图片
autoChage();
});
};
}
//自动切换图片
autoChage();
//创建一个方法用来设置选中的a
function setA(){
//判断当前索引是否是最后一张
if(index >= imgArr.length - 1){
//将index设置为0
index = 0;
//此时显示的最后一张图片，而最后一张图片与第一张图片是一样的，
// 所以在将最后一张图片换成第一张图片的时候是看不出来的
//通过CSS将最后一张图片换成第一张图片
imgList.style.left = 0;
}
//遍历所有a，并将他们的背景颜色设置为红色
for(var i=0; i<allA.length ;i++){
allA[i].style.backgroundColor = "";
}
//将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
}
var timer;
//创建一个函数，自动切换图片
function autoChage(){
//开启一个定时器，用来定时去切换图片
timer = setInterval(function(){
//使索引自增
index++;
//判断index
//执行动画，切换图片
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>
类的操作
- 通过
style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。 - 我们可以通过修改元素的class属性来间接的修改样式，这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离。
- 定义函数
①定义一个函数，用来向一个元素中添加指定的class属性值
参数：
obj：表示要添加class属性的元素
cn：表示要添加的class值
function addClass(obj,cn){
//检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className +=" "+cn;
}
}
②判断一个元素中是否含有指定的class属性值，如果有该class，则返回true，没有则返回false。
参数：
obj：表示要添加class属性的元素
cn：表示要添加的class值
function hasClass(obj,cn){
//判断obj中有没有cn class
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
③删除一个元素中的指定的class属性
参数：
obj：表示要添加class属性的元素
cn：表示要添加的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);
}
}
JSON
JSON（JavaScript Object Notation）JS对象表示法
- JS中的对象只有JS自己认识，其他的语言都不认识
- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
- SON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS对象语法一致
- JSON分类：
①对象{}
②数组[] - JSON中允许的值：
①字符串
②数值
③布尔值
④null
⑤对象（不包括函数）
⑥数组 - 在JS中，为我们提供了一个工具类，就叫JSON。这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON。（注意：JSON对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错。如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的JS文件来处理）
①将JSON转换为JS对象：JSON.parse()方法
它需要一个字符串作为参数，会将该字符串转换为JS对象并返回。
<script type="text/javascript">
//创建一个对象
var arr = '[1,2,"hello",true]';
var json = '{"name":"孙悟空","age":18,"gender":"男"}';
var o = JSON.parse(json);
var o2 = JSON.parse(arr);
console.log(o.name);
console.log(o2[1]);
</script>
② 将JS对象转换成JSON字符串：JSON.stringify()
需要一个JS对象作为参数，会返回一个JSON字符串。
<script type="text/javascript">
//创建一个对象
var obj3 = {name:"猪八戒",age:23,gender:"男"};
var str = JSON.stringify(obj3);
console.log(str);
</script>
eval()这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
① 如果使用eval()执行的字符串中含有{}，它会将{}当成是代码块。如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
②这个函数的功能很强大，可以直接执行一个字符串中的JS代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
<script type="text/javascript">
var str = '{"name":"孙悟空","age":18,"gender":"男"}';
var str2 = "alert('hello');";
var obj = eval("("+str+")");
console.log(obj)
</script>
扫一扫
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
