![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：unqualified
Teacher's comments：请写完再提交
Collection
Collection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将元素集合转为数组对象</title>
</head>
<body>
<ul>
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
</ul>
<script>
var lis =document.getElementsByTagName("li");
var arr1 =Array.prototype.slice.call(lis,0);
console.log(arr1)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
javascript中有两种定时器：
(1)定时器setTimeOut()与clearTimeOut()
setTimeOut()使用方法：< …… onClick="timerID=setTimeout('display ()',3000)">
1.设置定时器的名称为timeID以便以后终止定时器时用到clearTimeOut(timeID)。
2.display()方法要使用单引号。
3.点击事件发生3秒之后执行display()方法一次。
(2)定时器setInterval()与clearInterval()
setInterval()使用方法：<……onClick="timerID=setInterval ('display ()',3000)">
1.设置定时器的名称为timeID以便以后终止定时器时用到clearInterval(timeID)。
2.display()方法要使用单引号。
3.点击事件发生3秒之后重复的执行display()方法。直到关闭窗口或者调用clearInterval()
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击广告案例</title>
</head>
<body>
<div style="width: 300px;height: 200px;background-color: lightgreen">广告案例</div>
<p id="res"></p>
<script>
var div = document.getElementsByTagName('div').item(0);
var res = document.getElementById('res');
var num = 0;
var price = 0.5;
var click = new Event('click');
setInterval(function () {
div.dispatchEvent(click);
num += 1;
console.log(num);
res.innerHTML = '点击收入: '+ '<span style="color:lightcoral">'+(num * price).toString()+'</span>' + '元';
}, 2000);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4. 写出轮播图的基本实现原理与步骤,不少于200字:
轮播图的原理
1.图片移动实现原理：
利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。
2.图片移动动画原理：
从a位置移动到b位置，需要先计算两点之间的差值，通过差值和时间间隔，计算出每次移动的步长，通过添加定时器，每次移动相同的步长，实现动画效果。
3.图片定位停止原理：
每一张照片都有相同的宽度，每张照片都有一个绝对的定位数值，通过检测定每次移动后，照片当前位置和需要到达位置之间的距离是否小于步长，如果小于，说明已经移动到位，可以将定时器清除，来停止动画。
4图片切换原理：
在全局设置一个变量，记录当前图片的位置，每次切换或跳转时，只需要将数值修改，并调用图片页数转像素位置函数，再调用像素运动函数即可。
5.自动轮播原理：
设置定时器，一定时间间隔后，将照片标记加1，然后开始切换。
6.左右点击切换原理：
修改当前位置标记，开始切换。这里需要注意与自动轮播之间的冲突。当点击事件触发之后，停止自动轮播计时器，开始切换。当动画结束后再次添加自动轮播计时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图实例</title>
<style>
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
.box {
/*定位父级*/
position: relative;
width: 1000px;
height: 350px;
margin: 0 auto;
}
.box .slider {
width: 1000px;
height: 350px;
display: none;
}
.box .slider.active{
display: block;
}
.box .point-list {
position: absolute;
/*绝对定位的环境下的水平居中方式*/
left: 50%;
margin-left: -38px;
top: 310px;
}
.box .point-list .point {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 5px;
background-color: white;
border-radius: 100%;
}
.box .point-list .point.active {
background-color: black;
}
.box .point-list .point:hover {
cursor: pointer;
}
.skip {
position: absolute;
top: 140px;
display: inline-block;
width: 40px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: lightgray;
color: white;
opacity: 0.2;
font-size: 36px;
}
.box .prev{
left: 0;
}
.box .next{
right: 0;
}
.box .skip:hover {
cursor: pointer;
opacity: 0.5;
color: black;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img1.360buyimg.com/da/s590x470_jfs/t1/79425/15/4421/98558/5d283017E29d9a8fb/723bfa83c3f73613.jpg!q90!cc_590x470.webp" alt="" data-index="1" class="slider active">
<img src="https://img1.360buyimg.com/pop/s590x470_jfs/t1/45206/26/5099/84405/5d2c41f8E490ac899/c03df426cd52bfe9.jpg!q90!cc_590x470.webp" alt="" data-index="2" class="slider">
<img src="https://imgcps.jd.com/ling/7307139/6LaF5biC54m56Imy57K-6YCJ/54iG5ZOB5L2O6IezOS455YWD/t-5bd95d4f8e34e21f3ff67e71/15a71c63.jpg" alt="" data-index="3" class="slider">
<div class="point-list">
</div>
<span class="skip prev"><</span>
<span class="skip next">></span>
</div>
<script>
var imgs = document.images;
var imgArr = Array.prototype.slice.call(imgs, 0);
var pointList = document.getElementsByClassName('point-list').item(0);
imgArr.forEach(function (img, index){
var span = document.createElement('span');
if (index === 0) {
span.classList.add('point','active')
}
span.classList.add('point');
span.dataset.index = img.dataset.index;
pointList.appendChild(span);
});
var points = document.getElementsByClassName('point');
var pointArr = Array.prototype.slice.call(points, 0);
pointArr.forEach(function (point){
point.addEventListener('click', setImgActive, false);
});
function setImgActive(evt) {
imgArr.forEach(function (img){
if (img.dataset.index === evt.target.dataset.index) {
imgArr.forEach(function (img) { img.classList.remove('active') });
img.classList.add('active');
setPointActive(img.dataset.index);
}
});
}
var skip = document.getElementsByClassName('skip');
skip.item(0).addEventListener('click', skipImg, false);
skip.item(1).addEventListener('click', skipImg, false);
function skipImg(evt) {
var currentImg = null;
imgArr.forEach(function (img) {
if (img.classList.contains('active')) {
currentImg = img;
}
});
if (evt.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 (evt.target.classList.contains('next')) {
currentImg.classList.remove('active');
currentImg = currentImg.nextElementSibling;
if (currentImg !== null && currentImg.nodeName === 'IMG') {
currentImg.classList.add('active');
} else {
currentImg = imgArr[0];
currentImg.classList.add('active');
}
}
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');
});
}
var box = document.getElementsByClassName('box').item(0);
var timer = null;
box.addEventListener('mouseout', startTimer, false);
box.addEventListener('mouseover',clearTimer, false);
function startTimer() {
var clickEvent = new Event('click');
timer = setInterval(function () {
skip.item(1).dispatchEvent(clickEvent);
}, 2000);
}
function clearTimer() {
clearInterval(timer);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
