收藏
批改状态：合格
老师批语：以后不要这样提交作业了, 多天作业一天提交, 效果并不好, 不要将当天多个作业,分到不同的博客发布
1、如何将html元素集合转换为数组对象?
转换方式1:slice()方法
Array.prototype.slice.call(lis,0);
转换方式2:map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
Array.prototype.map.call(lis,function (x){
return x;
});
转换方式3: 仅适用于ES6 Array.from() from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
Array.from(lis);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将HTML集合转成真正的数组对象</title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
// html元素集合, 是类数组对象
// 类数组对象二大特征: 1. 从0递增的整数索引 2. 有length属性,表示元素的数量
var lis=document.getElementsByTagName('li');
console.log('lis：');
console.log(lis);
//将HTML集合(类数组对象)转成真正的数组对象
// 转换方式1: slice()
var arr1=Array.prototype.slice.call(lis,0);
console.log('slice()方法：');
console.log(arr1);
// 转换方式2: map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
var arr2=Array.prototype.map.call(lis,function (x){
return x;
});
console.log('map()方法：');
console.log(arr2);
// 转换方式3: 仅适用于ES6 Array.from() from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
var arr3=Array.from(lis);
console.log('from()方法：');
console.log(arr3);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果
2、slice() / splice()
（1）slice(): 从数组中取出部分数据, 返回取的数据组成的新数组
slice(起始索引, 结束索引), 结果中不包括结束索引对应的数据
（2） splice(): 主要用来删除数组中指定的元素, 始终返回被删除的元素
该方法,根据参数不同,功能有很大的差异
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slice() / splice()</title>
</head>
<body>
<script>
var arr1=[55,66,23,999,1678];
console.log('原数组');
console.log(arr1);
// 1. slice(): 从数组中取出部分数据, 返回取的数据组成的新数组
// slice(起始索引, 结束索引), 结果中不包括结束索引对应的数据
console.log('slice()方法');
var arr2=arr1.slice(1,4);//[66,23,999]
console.log(arr2);
var arr3=arr1.slice(1);//[66,23,999,1678]
console.log(arr3);
var arr4=arr1.slice(0);//返回全部数据 [55,66,23,999,1678]
console.log(arr4);
// 2. splice(): 主要用来删除数组中指定的元素, 始终返回被删除的元素
// 该方法,根据参数不同,功能有很大的差异
// splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
// arrayObject.splice(index,howmany,item1,.....,itemX)
// index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
// howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
// item1, ..., itemX 可选。向数组添加的新项目。
// 2.1 删除: 这是最基本的功能, 需要传入二个参数
// splice(起始索引, 删除数量)
// 删除前二项, 返回被删除数据组成的数组
console.log('splice()方法');
console.log(arr1.splice(0,2));
// 查看现在的数组情况
console.log( arr1 );//[23, 999, 1678]
// 2.2 插入数据
// 插入新数据, 第二个参数必须是0, 第三个参数起,是插入的新数据
// 从第二个位置起, 插入三个新数组
console.log(arr1.splice(1,0,1111,2222,3333));
console.log(arr1);// [23, 1111, 2222, 3333, 999, 1678]
// 2.3 更新数据
// 本质上就是删除+插入
// 将索引为4的数据替换成666, 其实就是把它删除再插入
console.log(arr1.splice(4,1,666));
console.log(arr1);//[23, 1111, 2222, 3333, 666, 1678]
// 也可以同时用多个值来更新它
console.log(arr1.splice(2,2,1234,6789));
console.log(arr1);//[23, 1111, 1234, 6789, 666, 1678]
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果
3、自定义属性的操作
元素的属性有两种：原生属性、自定义属性
获取原生属性,将元素看成对象,标签的属性看成该元素对象的属性,直接用点语法访问
针对data-为前缀的自定义属性,可以使用dataset方法
getAttribute() 方法返回指定属性名的属性值。可以获取原生属性，也可以获取自定义属性
setAttribute() 方法添加指定的属性，并为其赋指定的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义属性的操作</title>
</head>
<body>
<!--元素的属性有两种：原生属性、自定义属性-->
<h2
id="mobile"
class="active"
style="color: red;border: 1px solid black"
data-brand="华为"
data-model="P30"
data-price="4288"
abc-test="test"
>手机</h2>
<script>
var h2=document.getElementsByTagName('h2')[0];
// 获取原生属性,将元素看成对象,标签的属性看成该元素对象的属性,直接用点语法访问
console.log(h2.id);
console.log(h2.className); // class不能直接用,因为class是保留字
console.log(h2.style); // style属性返回值又是一个对象
console.log(h2.style.color);
console.log(h2.style.border);
console.log(h2.style.padding);//未定义，值为空
// 获取自定义属性
// console.log( h2.data-brand); // 报错
console.log(h2.getAttribute('data-brand'));
console.log(h2.getAttribute('data-model'));
console.log(h2.getAttribute('data-price'));
console.log(h2.getAttribute('abc-test'));
// 针对data-为前缀的自定义属性,还有更简便的访问方式
console.log(h2.dataset); // DOMStringMap,也是一个对象
console.log(h2.dataset.brand);
console.log(h2.dataset.model);
console.log(h2.dataset.price);
// getAttribute()也可以用来获取原生属性 getAttribute() 方法返回指定属性名的属性值。
console.log(h2.getAttribute('id'));
console.log(h2.getAttribute('class'));// 可直接使用class,不必转换成className
console.log(h2.getAttribute('style'));
// 原生属性,自定义属性,支持写操作
h2.className='hide';
console.log(h2.className);
h2.dataset.price='3200';
//数值类型转换成string类型
// h2.dataset.price=String(3590);
// h2.dataset.price=(3188).toString();
console.log(h2.dataset.price);
// setAttribute() 方法添加指定的属性，并为其赋指定的值。
h2.setAttribute('data-model','P30 Pro');
console.log(h2.getAttribute('data-model'));
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、classList对象
classList 属性返回元素的类名，该属性用于在元素中添加，移除及切换 CSS 类。
方法有：
add(class1, class2, ...) 在元素中添加一个或多个类名。
contains(class) 返回布尔值，判断指定的类名是否存在。
item(index) 返回元素中索引值对应的类名。索引值从 0 开始。
remove(class1, class2, ...) 移除元素中一个或多个类名。
toggle(class, true|false) 在元素中切换类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>classList对象</title>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<h2 class="one two three">classList 属性返回元素的类名，该属性用于在元素中添加，移除及切换 CSS 类。</h2>
<!--add(class1, class2, ...) 在元素中添加一个或多个类名。-->
<!--contains(class) 返回布尔值，判断指定的类名是否存在。-->
<!--item(index) 返回元素中索引值对应的类名。索引值从 0 开始。-->
<!--remove(class1, class2, ...) 移除元素中一个或多个类名。-->
<!--toggle(class, true|false) 在元素中切换类名。-->
<script>
var h2=document.getElementsByTagName('h2')[0];
//1.获取class样式
//传统方式
console.log(h2.className);
//classList对象方式
console.log(h2.classList.value);
//2.添加
h2.classList.add('four');
console.log(h2.classList.value);
h2.classList.add('test1','test2');//添加多个
console.log(h2.classList.value);
//3.更新
h2.classList.replace('one','red');
console.log(h2.classList.value);
//4.获取某一个
console.log(h2.classList.item(0));
console.log(h2.classList.item(3));
//5.删除一个或者多个
h2.classList.remove('four');
console.log(h2.classList.value);
h2.classList.remove('two','test1');
console.log(h2.classList.value);
//6.自动切换，有则删除，没有就添加
h2.addEventListener('click',function(event){
h2.classList.toggle('red');
},false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
5、定时器的种类与使用场景和事件模拟器
（1）setTimeout(),延时一段时间再执行 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
setTimeout() 只执行 code 一次。
（2）setInterval(): 间歇式重复执行
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval(code,millisec[,"lang"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
（3）事件模拟器: 可以自动生成了一个点击事件对象,分配给播放按钮
如实现图片自动播放，不需要点击播放按钮，或者实现自动点击广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器与事件模拟器</title>
</head>
<body>
<h2>setTimeout()案例：实现登录后，三秒后跳转网页</h2>
<button>登录</button>
<button>取消</button>
<p></p>
<hr>
<h2>setInterval()案例：实现多张图片轮播效果</h2>
<button>播放</button>
<button>停止</button>
<hr>
<img src="images/banner1.jpg" alt="" width="600">
<hr>
<h2>事件模拟器的应用场景与案例：自动点击联盟广告</h2>
<div style="width: 300px;height:200px;background-color: lightblue ">联盟广告......</div>
<div id="res"></div>
<script>
//定时器
// 1.setTimeout(),延时一段时间再执行 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
// setTimeout(code,millisec)
// code 必需。要调用的函数后要执行的 JavaScript 代码串。
// millisec 必需。在执行代码前需等待的毫秒数。
// setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
var btn1=document.getElementsByTagName('button')[0];
var btn2=document.getElementsByTagName('button')[1];
var tips=document.getElementsByTagName('p')[0];
var timer=null;
btn1.addEventListener('click',login,false);
function login() {
tips.innerText='正在跳转中...';
timer=setTimeout(function () {
location.assign('http://www.php.cn');//assign() 方法可加载一个新的文档。
},3000);
console.log(timer);
}
btn2.addEventListener('click',function (event) {
//clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
clearTimeout(timer);
tips.innerText='';
console.log(timer);
});
// 2. setInterval(): 间歇式重复执行
// setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
// setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
// 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
// setInterval(code,millisec[,"lang"])
// code 必需。要调用的函数或要执行的代码串。
// millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
var btn3=document.getElementsByTagName('button')[2];
var btn4=document.getElementsByTagName('button')[3];
var img=document.images[0];
var timer1=null;
// 随机显示一张图片
btn3.addEventListener('click',play,false);
function play() {
timer1=setInterval(function () {
// Math.random(): 随机产生一个0（包含）-1（不包含）之间的小数
// ceil() 方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。
// Math.ceil(Math.random()*3): 产生1-3之间随机数
var index=Math.ceil(Math.random()*3);
img.src='images/banner'+index.toString()+'.jpg';
console.log(img.src);
},1000);
}
btn4.addEventListener('click',function (event) {
// clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval(timer1);
},false);
// 事件模拟器: 解放双手, 让机器代替你工作
// 可以自动生成了一个点击事件对象,分配给播放按钮
// 实现图片自动播放，不需要点击播放按钮
//生成事件
// var event = new Event('click');
//触发事件
// btn3.dispatchEvent(event);
//自动点击联盟广告
var div=document.getElementsByTagName('div')[0];
var res=document.getElementById('res');
var num=0;
var price=0.5;
var click=new Event('click');
setInterval(function () {
div.dispatchEvent(click);
num=num+1;
res.innerHTML='<p>广告点击次数：'+num+'</p>' +
'<p>广告收入：<span style="color: red">'+(num*price).toString()+'</span>元</p>';
},3000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
6、写出轮播图的基本实现原理与步骤
（1）基本的HTML和css代码编写，因为是轮播图片，所以需要在css中对图片、前后切换按钮、小圆点按钮进行位置定位；对未播放的图片进行隐藏显示；对各个样式进行编写。
（2）获取所有图片,将图片列表由HTML集合转为真正的数组类型，通过图片创建和设置小圆点的数量与样式, 小圆点与图片的数量关联,实现每添加一张图, 小圆点数量自动更新。同时自定义属性，让小圆点的data-index属性与图片的data-index属性一致，使小圆点与图片一一对应。
（3）为小圆点设置点击事件,需要对图片、小圆点设置激活样式，对原来激活的图片和小圆点移除激活样式，然后在根据小圆点的data-index值与图片data-index对应关系来确定需要切换的图片，进行添加class：‘active’属性来激活新选择的图片和小圆点。
（4）前后页切换按钮设置：对当前激活的图片而已，如果点击前按钮，需要显示前一个兄弟元素节点，如果点击后按钮，需要显示后一个兄弟元素节点，通过判断点击的是前按钮还是后按钮来进行相应的激活设置
（5）通过定时器和事件模拟器，来设置图片的轮播效果，通过鼠标移动事件，来判断图片是否进行轮播。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图实战</title>
<style>
.box{
position:relative;
width: 1200px;
height: 400px;
margin: 0 auto;
}
.box .slider{
width: 1200px;
height: 400px;
display: none; /*元素不会被显示。*/
}
.box .slider.active{
display: block; /*元素将显示为块级元素，此元素前后会带有换行符 */
}
.box .point-list{
position: absolute;
left: 50%;
margin-left: -48px;
top:360px;
}
.box .point-list .point{
display: inline-block;
width: 15px;
height: 15px;
margin: 0 5px;
background-color: white;
border-radius:50%;
}
.box .point-list .point.active{
background-color: black;
}
.box .point-list .point:hover{
/*cursor 一些不同的光标*/
/*pointer 光标呈现为指示链接的指针（一只手）*/
cursor:pointer;
}
.skip{
position: absolute;
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
background-color: lightgray;
color: black;
opacity:0.3;
font-size: 36px;
top:170px;
border-radius:50% ;
}
.box .prev{
left:0;
}
.box .next{
right: 0;
}
.box .skip:hover{
cursor:pointer;
opacity: 0.6;
color: red;
}
</style>
</head>
<body>
<div class="box">
<!--轮播图片-->
<img src="images/banner1.jpg" alt="" data-index="1" class="slider active">
<img src="images/banner2.jpg" alt="" data-index="2" class="slider">
<img src="images/banner3.jpg" alt="" data-index="3" class="slider">
<!--轮播小圆点-->
<div class="point-list">
<!--<span class="point active" data-index="1"></span>-->
<!--<span class="point " data-index="2"></span>-->
</div>
<!--轮播左右切换按钮-->
<span class="skip prev"> < </span>
<span class="skip next"> > </span>
</div>
<script>
//获取所有图片,将图片列表由HTML集合转为真正的数组类型
var imgs=document.images;
var imgArr=Array.prototype.slice.call(imgs,0);
// console.log(imgArr);
//获取小圆点父节点
var pointList=document.getElementsByClassName('point-list')[0];
// 设置小圆点的数量与样式, 与图片的数量关联,实现每添加一张图, 小圆点数量自动更新
// img: 当前元素 index: 当前元素的索引值。
imgArr.forEach(function (img,index) {
var span=document.createElement('span');
if(index===0){
span.classList.add('point','active');
}else{
span.classList.add('point');
}
//让小圆点的data-index属性与图片的data-index属性一致，使小圆点与图片一一对应
span.dataset.index=img.dataset.index;
pointList.appendChild(span);
});
// 获取所有的小圆点,将小圆点的html集合, 转为真正的数组
var points=document.getElementsByClassName('point');
pointArr=Array.prototype.slice.call(points,0);
// 为小圆点设置点击事件,切换图片
pointArr.forEach(function (point) {
point.addEventListener('click',setImgActive,false);
});
// 设置图片切换
function setImgActive(event) {
// event.target: 当前被点击的对象,就是小圆点
imgArr.forEach(function (img) {
// 根据小圆点的data-index值与图片data-index对应关系来确定需要切换的图片
if(img.dataset.index===event.target.dataset.index){
// 去掉原来所有图片上的激活样式
imgArr.forEach(function (img1) {
img1.classList.remove('active');
});
// 设置当前图片为显示激活状态
img.classList.add('active');
// 设置小圆点的当前激活与高亮状态
setPointActive(img.dataset.index);
}
});
}
// 获取翻页跳转按钮
var skip =document.getElementsByClassName('skip');
var leftskip=document.getElementsByClassName('skip')[0];
var rightskip=document.getElementsByClassName('skip')[1];
// 为翻页按钮添加事件
leftskip.addEventListener('click',skipImg,false);
rightskip.addEventListener('click',skipImg,false);
function skipImg(event) {
// 获取当前正在显示的图片
var currentImg=null;
imgArr.forEach(function (img) {
//contains(class) 返回布尔值，判断指定的类名是否存在。
if(img.classList.contains('active')){
currentImg=img;
}
});
// 判断点击的是显示前一个图片
if(event.target.classList.contains('prev')){
// 显示前一个兄弟元素节点
// 移除当前图片高亮, 不要再显示
currentImg.classList.remove('active');
// 更新当前图片节点
currentImg=currentImg.previousElementSibling;
// 显示前一个兄弟元素节点
if(currentImg!==null && currentImg.nodeName==='IMG'){
// 高亮前一个兄弟节点图片
currentImg.classList.add('active');
}else{
// 如果不存在前一个兄弟节点,则显示最后一个,以此来循环显示
// 高亮最后一个兄弟节点图片
currentImg=imgArr[imgArr.length-1];
currentImg.classList.add('active');
}
}
// 判断是否是点击了显示后一个图片
if(event.target.classList.contains('next')){
currentImg.classList.remove('active');
currentImg=currentImg.nextElementSibling;
// 显示后一个兄弟元素节点
if(currentImg!==null &¤tImg.nodeName==='IMG'){
currentImg.classList.add('active');
}else{
// 如果不存在后一个兄弟节点,则显示第一个,以此来循环显示
// 高亮第一个兄弟节点图片, 索引为0
currentImg=imgArr[0];
currentImg.classList.add('active');
}
}
// 获取当前显示的图片的data-index
var imgIndex=currentImg.dataset.index;
setPointActive(imgIndex);
}
// 设置小圆点高亮
function setPointActive(imgIndex) {
// 清除小圆点原有的高亮
pointArr.forEach(function (point) {
point.classList.remove('active');
});
pointArr.forEach(function (point) {
if(point.dataset.index===imgIndex){
point.classList.add('active');
}
});
}
// 定时器: 每隔2秒自动切换
// 这类自动操作最适合事件模拟器完成
// 这里选择点击下一页的按钮事件来做(上一页也可以,随意)
// 利用鼠标移入与移出事件来启动/关闭定时器
var box=document.getElementsByClassName('box')[0];
// 创建定时器并初始化
var timer=null;
// 创建鼠标移动事件监听器
// 1. 当鼠标移出轮播图区域时, 启动定时器控制轮播图的播放
box.addEventListener('mouseout',startTimer,false);
// 2. 当鼠标移入到轮播图区域时, 清除定时器,由用户点击来控制轮播图的播放
box.addEventListener('mouseover',clearTimer,false);
// startTimer: 启动定时器的方法
function startTimer() {
// 先生成了一个自定义的点击事件对象
var clickEvent=new Event('click');
timer=setInterval(function () {
// 将自定义的点击事件分配给下一页按钮,实现自动点击
rightskip.dispatchEvent(clickEvent);
},2000);
}
// clearTimer: 清除定时器的方法
function clearTimer() {
clearInterval(timer);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行结果：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
