![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：对于一个案例, 先不要急着写, 先画个图,列出步骤再动手, 这样最好
Collection
Collection
一、数组
1.html集合元素转数组
方法一:slice()方法
方法二:from()方法，仅es6适用
<script>
var lis = document.getElementsByTagName('li');
var arr1 = Array.prototype.slice.call(lis,0);
console.log(arr1);
var arr2 = Array.from(lis);
console.log(arr2);
</script>点击 "运行实例" 按钮查看在线实例
2.slice与splice的用法
[1]slice(起始索引,结束索引)
<script> var arr1 = ['数学','语文','英语','化学','物理','生物','地理']; console.log(arr1); var arr1 = arr3.slice(0,4); console.log(arr1); </script>
点击 "运行实例" 按钮查看在线实例
[2]splice(起始索引,删除数量,插入数据)
[2.1]删除操作
<script> var arr1 = ['11','22','33','44','55','66']; console.log(arr1.splice(5,1)); console.log(arr1); </script>
点击 "运行实例" 按钮查看在线实例
[2.2]增加操作
<script> var arr1 = ['11','22','33','44','55','66']; console.log(arr1.splice(6,0,76,88,99)); console.log(arr1); </script>
点击 "运行实例" 按钮查看在线实例
[2.3]更新操作
<script> var arr1 = ['11','22','33','44','55','66']; console.log(arr1.splice(6,1,77)); console.log(arr1); </script>
点击 "运行实例" 按钮查看在线实例
二、定时器与事件模拟
1.setTimeout(),延迟一段时间执行,只执行一次,如:网页的定时跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器与事件模拟</title>
</head>
<body>
<button onclick="conn()">连接数据库</button>
<script>
function conn() {
alert('连接数据库成功!将在3秒后跳转...');
var timer = setTimeout(function() {
location.assign('http://www.php.cn');
},3000);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.setInterval(),每隔一定时间执行一次,如:轮播图的自动播放,Math.random()0~1之间的随机小数,Math.ceil()向上取整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器与事件模拟</title>
</head>
<style>
div{
width:600px;
height:200px;
text-align: center;
line-height:200px;
background-color: #00a5e0;
color: #fff;
margin-top: 20px;
}
</style>
<body>
<button>开始</button>
<button>结束</button>
<div></div>
<script>
var btn1 = document.getElementsByTagName('button').item(1);
var btn2 = document.getElementsByTagName('button').item(2);
var box = document.getElementsByTagName('div').item(0);
btn1.addEventListener('click',start,false);
function start() {
timer = setInterval(function() {
var num =Math.ceil(Math.random()*5);
box.innerText = '图片' + num;
},1000);
}
btn2.addEventListener('click',stop,false);
function stop() {
clearInterval(timer);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.事件模拟器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器与事件模拟</title>
</head>
<style>
div{
width:600px;
height:200px;
text-align: center;
line-height:200px;
background-color: #00a5e0;
color: #fff;
margin-top: 20px;
}
</style>
<body>
<div></div>
<script>
var box1 = document.getElementsByTagName('div').item(0);
var day = 0;
var money = 1200;
var click = new Event('click');
setInterval(function() {
box1.dispatchEvent(click);
day += 1;
box1.innerText = '店铺收益为：' + day*money + '元';
},3000)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
三、轮播图
基本思路：
1.用css+html写出基本样式
2.自动获取图片数量,并将图片列表转换为数组形式,方便后期操作
3.获取图片数量后,将其与小圆点的个数进行绑定,实现动态添加小圆点
4.把小圆点转化为数组,与图片一一对应,当点击小圆点是切换对应图片,当前小圆点高亮显示,图片出于激活状态
5.上一页,下一页图片切换功能,并判断是否为第一张图片和最后一张图片,使图片可以循环显示
6.添加定时器,让图片在规定时间内定时切换
7.鼠标事件,当用户将鼠标移到轮播图范围内,停止切换图片,等待用户下一步操作，鼠标移出,恢复默认
实例：水平问题，后补
