收藏
批改狀態(tài)：合格
老師批語：js中的這些理論基礎(chǔ)是枯燥的,但卻是進(jìn)階必備的
HTML集合轉(zhuǎn)換成數(shù)組對(duì)象
1.獲取HTML集合 然后 轉(zhuǎn)換成數(shù)組 用Array.prototype.slice.call();
ES6 轉(zhuǎn)換數(shù)組則用 Array.from（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組的知識(shí)</title>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
//將HTML集合轉(zhuǎn)成真正的數(shù)組
var lis = document.getElementsByTagName('li');
console.log(lis);
var arr = Array.prototype.slice.call(lis);
console.log(arr);
var arr1 = Array.from(lis);
console.log(arr1);
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
關(guān)于slice（）與splice（）知識(shí)點(diǎn)
1.slice（）從數(shù)組中取出部分?jǐn)?shù)據(jù), 返回取的數(shù)據(jù)組成的新數(shù)組
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數(shù)組的知識(shí)</title> </head> <body> <script> var Arr1 = ['華為','三星','蘋果','錘子','小米']; console.log(Arr1); var Arr2 = Arr1.slice(1,2); //第一個(gè)值為起始索引，第二個(gè)值為終止索引，返回值不包括終止索引的值； console.log(Arr2); </script> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
2. splice(): 多用于數(shù)組的增刪改查數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數(shù)組的知識(shí)</title> </head> <body> <script> var Arr1 = ['華為','三星','蘋果','錘子','小米']; console.log(Arr1); // 2. splice(): 主要用來刪除數(shù)組中指定的元素, 始終返回被刪除的元素 //刪除數(shù)組中的指定元素 var Arr3 = Arr1.splice(0,2); //第一個(gè)值為起始索引，第二值為刪除數(shù)量 console.log(Arr3); //展示的刪除的數(shù)據(jù) console.log(Arr1);//展示刪除后的數(shù)據(jù) //插入數(shù)據(jù) var Arr4 = Arr1.splice(2,0,'魅族','OPPO'); // 第一個(gè)值為起始索引，則為要插入當(dāng)前位置，第二個(gè)為0，之后為插入的新數(shù)據(jù) console.log(Arr1); //更新數(shù)據(jù) var Arr5 = Arr1.splice(1,1,'vivo'); //第二個(gè)值為刪除數(shù)量，第一個(gè)值為起始索引，則為要插入當(dāng)前位置，之后為插入的新數(shù)據(jù) console.log(Arr1); </script> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
3.自定義屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)組的知識(shí)</title>
</head>
<body>
<h3 class="red black white" data-brand="華為">演示</h3>
<script>
var h3 = document.getElementsByTagName('h3').item(0);
console.log(h3);
// 獲取原生屬性,將元素看成對(duì)象,標(biāo)簽的屬性看成該元素對(duì)象的屬性,直接用點(diǎn)語法訪問
console.log( h3.id );
// 獲取自定義屬性
console.log( h3.getAttribute('data-brand') );
//getAttribute() 可以獲取原生屬性
// 原生屬性,自定義屬性,支持寫操作
//第一種修改屬性方法
// h3.className = 'hide';
console.log( h3.className );
//第二種修改屬性方法
h3.dataset.brand = '3590';
console.log( h3.dataset.brand );
//第三種修改屬性方法
h3.setAttribute('data-brand', 'P30 Pro');
console.log( h3.getAttribute('data-brand') );
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
4.classList對(duì)象
//classList對(duì)象
//獲取class樣式
console.log(h3.className); //傳統(tǒng)方法
console.log(h3.classList.value); //對(duì)象方式
//添加class樣式
h3.classList.add('woshi1');
console.log(h3.classList.value);
//更新class樣式
h3.classList.replace('woshi1','woshi2');
console.log(h3.classList.value);
//獲取某一個(gè)class樣式
console.log(h3.classList.item(0));
//刪除一個(gè)或多個(gè)樣式
h3.classList.remove('woshi2','red');
console.log(h3.classList.value);
//自動(dòng)切換，有則刪除，無則添加
h3.addEventListener('click',function () {
h3.classList.toggle('red');
})點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
5.定時(shí)器與事件模擬器
1.定時(shí)執(zhí)行 一次性定時(shí)器 setTimeout() 清除用clearTimeout()
2.間歇式定時(shí)器 重復(fù)執(zhí)行 setInterval() 清除用clearInterval()
3.事件模擬器的原理 生成一個(gè)點(diǎn)擊事件 var click = new Event('click');
點(diǎn)擊事件分配給 當(dāng)前節(jié)點(diǎn).dispatchEvent(click);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定時(shí)器與時(shí)間模擬器</title>
</head>
<body>
<h3>setTimeout()一次性定時(shí)器案例</h3>
<button>登陸</button>
<button>取消</button>
<p></p>
<hr>
<p>點(diǎn)擊我3秒后給你彈個(gè)框</p> <button>彈個(gè)框</button>
<p>點(diǎn)擊我取消執(zhí)行任務(wù)</p> <button>取消</button>
<hr>
<h3>setInterval() 間歇式定時(shí)器 重復(fù)使用案例</h3>
<p>北京時(shí)間</p>
<input type="text" class="clock" id="clock" style="width: 500px;">
<button>停止</button>
<hr>
<h3>事件模擬器案例</h3>
<div style="width: 200px;height: 200px;background-color: #3377aa">
點(diǎn)擊我
</div>
<p id="price"></p>
<script>
//setTimeout() 只執(zhí)行一次, 清除用clearTimeout
//setInterval() 每間隔指定的時(shí)間, 就執(zhí)行一次, 清除用clearInterval
var btn1 = document.getElementsByTagName('button').item(0);
var btn2 = document.getElementsByTagName('button').item(1);
var tips = document.getElementsByTagName('p').item(0);
var timer = null;
//setTimeout() 延遲多少秒執(zhí)行，一次性定時(shí)器
btn1.addEventListener('click',login,false);
function login() {
tips.innerText = '正在登陸中';
timer = setTimeout(function () {
location.assign('http://www.baidu.com');
},3000);
}
//取消跳轉(zhuǎn)，清除定時(shí)器
btn2.addEventListener('click',function (ev) {
clearTimeout(timer);
tips.innerText = null ;
// console.log(timer);
})
// 彈個(gè)框小案例
var btn3 = document.getElementsByTagName('button').item(2);
var btn4 = document.getElementsByTagName('button').item(3);
btn3.addEventListener('click',function () {
timer = setTimeout(
function () {
alert('我給你彈了個(gè)框');
},3000
)
});
btn4.addEventListener('click',function () {
clearTimeout(timer);
})
// setInterval() 間歇式定時(shí)器 重復(fù)執(zhí)行
var clock = document.getElementsByClassName('clock').item(0);
var timer = setInterval(function () {
var time = new Date();
clock.value = time ;
},50)
var btn5 = document.getElementsByTagName('button').item(4);
btn5.addEventListener('click',function () {
clearInterval(timer);
})
// 事件模擬器
var div = document.getElementsByTagName('div').item(0);
var pr = document.getElementById('price');
var num = 0 ;
var price = 0.5;
var click = new Event('click');
setInterval(function () {
div.dispatchEvent(click);
num +=1;
pr.innerHTML = '廣告收入' + (num*price) +'元';
},2000)
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
6.輪播圖的實(shí)行原理
一、先設(shè)置小圓點(diǎn)，讓小圓點(diǎn)數(shù)量與圖片數(shù)量同步，并 一 一對(duì)應(yīng)，DOM結(jié)構(gòu)中小圓點(diǎn)可以注釋掉；
步驟為：
1.先拿取圖片 用document.images;
2.將所有圖片集合轉(zhuǎn)換為數(shù)組 用Array.prototype.slice.call（img，0）；
3.獲取小圓點(diǎn)的父節(jié)點(diǎn)，createElement在內(nèi)存上添加子節(jié)點(diǎn)，用數(shù)組forEach按照?qǐng)D片數(shù)量添加span小圓點(diǎn)，根據(jù)if判斷索引，當(dāng)index為0時(shí)，第一個(gè)小圓點(diǎn)添加active class屬性
4.讓span的自定義屬性data-index與img的自定義屬性data-index同步，可用 span.classList.index = img.classList.index
利用父節(jié)點(diǎn)的appendChild（）給頁面打印上標(biāo)簽；
二、給小圓點(diǎn)設(shè)置點(diǎn)擊事件，切換圖片（setImgActive）
步驟為:
1.小圓點(diǎn)為被點(diǎn)擊的對(duì)象，利用data-index中對(duì)應(yīng)關(guān)系，當(dāng)圖片的data-index與點(diǎn)擊的小圓點(diǎn)data-index全等時(shí)，刪除所有圖片的激活樣式，再給當(dāng)前圖片激活樣式，利用封裝設(shè)置小圓點(diǎn)的高亮樣式 setPointActive（img.dataset.index）；
三、翻頁跳轉(zhuǎn)按鈕
獲取翻頁跳轉(zhuǎn)按鈕然后添加監(jiān)聽事件，然后獲取當(dāng)前的顯示圖片，用img.classList.contains（'active'），再用if判斷點(diǎn)擊的是顯示前一個(gè)圖片還是后一個(gè)圖片，ev.target.classList.contains('prev'或者'next')，然后刪除當(dāng)前節(jié)點(diǎn)的active，或者上一張圖片previousElementSibling/下一張圖片nextElementSibling
判斷是否不存在前一個(gè)或后一個(gè)兄弟節(jié)點(diǎn)，用if（currentImg !== null && currentImg.nodename === 'IMG'）獲取最后一個(gè)節(jié)點(diǎn)圖片currentImg = imgArr[imgArr.length-1];? 獲取第一個(gè)節(jié)點(diǎn)圖片currentImg = imgArr[0];?
然后獲取當(dāng)前顯示圖片的data-index 設(shè)置小圓點(diǎn)高亮setPointActive（）
先清除所有的小圓點(diǎn)高亮，在判斷dataset.index是否全等于 當(dāng)前的圖片的dataest.index 是的話，添加激活樣式
四、自動(dòng)切換圖片用定時(shí)器切換，用事件模擬器完成
設(shè)置鼠標(biāo)移出/移入的監(jiān)聽事件，用setInterval
生成一個(gè)自定義的點(diǎn)擊事件對(duì)象 如 var clickEvent = new Event('click')；
將點(diǎn)擊事件分配給按鈕 如skip.item(0).dispatchEvent(clickEvent);移入則清除定時(shí)器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>輪播圖實(shí)戰(zhàn)</title>
<style>
.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: -45px;
top:310px;
}
.box .point-list .point{
display: inline-block;
width:15px;
height: 15px;
margin: 0 5px;
background-color: white;
border-radius: 100%;
}
.box .point-list .point.active{
background-color: black;
}
.box .point-list .point:hover {
cursor: pointer;
}
.box .skip{
position: absolute;
display: inline-block;
top:140px;
width:40px;
height:80px;
text-align: center;
line-height: 80px;
background-color: #666699;
color: white;
opacity: 0.2;
font-size:36px;
}
.box .skip.prev{
left:0;
}
.box .skip.next{
right:0;
}
.box .skip:hover {
cursor: pointer;
color: black;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box">
<img src="static/images/banner1.jpg" alt="" data-index="1" class="slider active">
<img src="static/images/banner2.jpg" alt="" data-index="2" class="slider ">
<img src="static/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>-->
<!--<span class="point " data-index="3"></span>-->
</div>
<span class="skip prev"><</span>
<span class="skip next">></span>
</div>
<script>
var img = document.images;
console.log(img);
var imgArr = Array.prototype.slice.call(img, 0);
console.log(imgArr);
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 pointsArr = Array.prototype.slice.call(points,0);
console.log(pointsArr);
pointsArr.forEach(function (point) {
point.addEventListener('click',setImgActive,false);
});
function setImgActive(ev) {
imgArr.forEach(function (img) {
if (img.dataset.index === ev.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(ev) {
var currentImg = null;
imgArr.forEach(
function (img) {
if (img.classList.contains('active')){
currentImg = img ;
}
}
);
if (ev.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 (ev.target.classList.contains('next')){
currentImg.classList.remove('active');
currentImg = currentImg.nextElementSibling;
if (currentImg !== null && currentImg.nodeName === 'IMG') {
// 高亮前一個(gè)兄弟節(jié)點(diǎn)圖片
currentImg.classList.add('active');
} else {
// 如果不存在前一個(gè)兄弟節(jié)點(diǎn),則顯示最后一個(gè),以此來循環(huán)顯示
// 高亮第一個(gè)兄弟節(jié)點(diǎn)圖片, 索引為0
currentImg = imgArr[0];
currentImg.classList.add('active');
}
}
var imgIndex = currentImg.dataset.index;
setPointActive(imgIndex);
}
function setPointActive(imgIndex) {
pointsArr.forEach(function (point) {
point.classList.remove('active')
});
pointsArr.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);
},3000);
}
function clearTimer() {
clearInterval(timer);
}
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
效果圖：
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)