![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：完成的相当OK
Collection
Collection
1、将html元素转化成数组
因为数组的方法很强大，所以很多时候要对元素进行操作时，转化成数组很方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
/*html元素集合是一种类数组对象，拥有数据两大特征：从0递增的自然数索引；有length属性*/
var li = document.getElementsByTagName('li'); /*获取到li元素*/
/*第一种转换方式 array.slice()*/
var arr1=Array.prototype.slice.call(li,0); /*利用数组的构造函数和原型属性，利用slice.call这个方法，
第一个参数是元素对象，第二个参数是从第几个开始获取，填0表示从头到尾所有*/
console.log(arr1);
/*第二种转换方式 from()，仅适用于ES6*/
var arr2=Array.from(li); /*利用数组的构造函数，利用from方法，参数是元素对象，获取到所有的*/
console.log(arr2);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、比较数组的slice() 和 splice()
slice()适合于截取数组部分数据。
splice()适合对数组进行 增删改查 的操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> /*slice() ，从数组中截取出部分数据，返回所取数据组成的数组*/ var arr=['hong','cheng','huang','lv','lan']; var arr3=arr.slice(1,2); /*两个参数代表开始索引和结束索引，但不包括 结束索引对应的数据*/ console.log(arr3); /*只有'cheng'*/ /*splice(),可删除、增加、修改数组中的部分数据*/ var arr4=arr.splice(0,1);/*删除时，第一个参数是开始索引，第二个位置代表删除的量，返回被删除数据 组成的数组*/ console.log(arr4);/*返回'hong'*/ var arr5=arr.splice(2,0,'hua','cao');/*插入时，第一个参数是开始索引，第二个参数必须是0，第三个参数起是要插入的数据，*/ console.log(arr5); var arr6=arr.splice(0,2,'shan','hai');/*更新 就是先删除再插入，所以第二个参数=添加的数量*/ console.log(arr6); </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
3、原生属性和自定义属性
原生属性在获取时，要注意class稍有不同。
自定义属性特别适合实际项目情况，尤其是data命名开头时，还有专门的操作方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="hua" class="huahua" style="color: lightgreen"
data-weidao="xiang"
data-daxiao="10cm"
>
这是一个div标签
</div>
<script>
var div1=document.getElementsByTagName('div');
/*把元素看做对象，获取原生属性可以用对象的方式，用点语法*/
console.log(div1.className);/*class是保留字 所以不能直接用*/
console.log(div1.style.color);
/*获取自定义属性*/
console.log( div1.getAttribute('data-weidao')); /*getAttribute()既可以获取自定义属性又可以获取原生属性*/
console.log( div1.dataset.daxiao);/*适合 data-为前缀的自定义属性*/
/*原生属性和自定义属性 都可以读和写*/
div1.id='hua1;';
div1.getAttribute('data-weidao','chou');
console.log( div1.id);
console.log( div1.getAttribute('data-weidao'));
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、通过classList实现对象数据的增删改查和自动切换
通过classList可实现对元素class属性值的增删改查，特别是css类样式的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这是一个css类*/
.red{
color: red;
}
</style>
</head>
<body>
<h1 class="one two three">classList</h1>
<script>
/*classList*/
var h1 = document.getElementsByTagName('h2').item(0);
console.log( h1.className );/*普通方法获取class值*/
console.log( h1.classList.value);/*通过classList获取*/
h1.classList.add('four');/*通过classList添加*/
h1.classList.replace('one', '111');/*通过classList替换*/
h1.classList.remove('four');/*通过classList删除*/
console.log( h1.classList.item(0) );/*通过classList获取第一个*/
/*实现自动切换的反转操作，当h1有这个red类时，就删除，没有就增加*/
h1.addEventListener('click', function (event) {
h1.classList.toggle('red'); /*red是指一个css类，上面有定义*/
},false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5、定时器练习
setTimeout（）是设置一个定时生效的操作。
setInterval()是让一段操作 间歇式地不断重复。
事件模拟器是通过对象的构造函数生成一个点击对象，再通过dispatchEvent（）方法去触发这个点击事件，从而实现系统的自动执行效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<button>登录</button>
<button>取消登录</button>
<p></p>
<hr>
<button>播放</button>
<button>停止</button>
<hr>
<img src="images/banner1.jpg" alt="" width="500">
<div style="width: 200px;height: 150px;background-color: lightgreen">广告</div>
<p id="price"></p>
<script>
/*1、setTimeout(),等一段时间再执行*/
var btn1 = document.getElementsByTagName('button').item(0);
var btn2 = document.getElementsByTagName('button').item(1);
var tex = document.getElementsByTagName('p').item(0);
var timer = null;
btn1.addEventListener('click', function (ev) { /*点击“登录”后，跳转到百度*/
tex.innerText="正在努力加载中";
timer=setTimeout(function () {
location.assign('http://www.baidu.com');
},2000)
}, false);
btn2.addEventListener('click',function (ev) {
clearTimeout(timer); /*点击“取消登录”后，就不再跳转*/
tex.innerText = '已取消跳转';
});
/*2、setInterval()，间隙式地 不断重复执行*/
var btn3 = document.getElementsByTagName('button').item(2);
var btn4 = document.getElementsByTagName('button').item(3);
var img = document.images.item(0);
btn3.addEventListener('click',function () {
timer = setInterval(function () {
var a=Math.random();/*随机产生一个0-1之间的小数*/
var index=Math.ceil(a*3);/*产生1-3之间随机整数*//*Math.ceil()是向上取整*/
img.src = 'images/banner' + index.toString() + '.jpg'; /*改变图片路径*/ /* toString()把数字转换为字符串*/
},1000
)
}, false);
btn4.addEventListener('click', function () {
clearInterval(timer); /*清除 间隙式定时器*/
},false);
/*3、事件模拟器，让系统自动生成一个点击对象，代替鼠标点击来触发*/
var div = document.getElementsByTagName('div').item(0);
var price = document.getElementById('price');
var num = 0;
var shouru = 0.5;
var click = new Event('click'); /*利用对象的构造函数生成一个点击对象*/
setInterval(function () {
div.dispatchEvent(click); /*通过dispatchEvent()这个事件触发器方法 触发点击事件*/
num += 1; /*num + shouru 起始值是1.5 每次+1*/
price.innerHTML = '广告收入: '+ '<span style="color:red">'+(num + shouru).toString()+'</span>' + '元';
/*JS中用html语法要用引号引起来*/
}, 2000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6、朱老师的定时器算法思路
1、DOM结构：三张图片，三个小点，两个左右切换按钮。为了让小点数量自动和图片匹配，所以只写了小点的父级标签，并没有定义小点的每个标签及其属性，后期在自动定义小点时，会让小点的自定义属性=图片的自定义属性。
2、实现小点的自动增加（小点数量=图片数量），尤其注意小点的自定义属性=图片的自定义属性。
3、为每个小点增加点击事件，点击以后 更改小点的样式（利用classList的切换类样式） 和 图片。
4、为左右切换按钮设置 图片切换，通过判断显示图片的节点来决定如何切换。
5、利用事件模拟器来实现图片的轮播，鼠标移出就启动 间歇式重复定时器，鼠标移入就取消定时器。