![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>经典轮播图</title><style>/* 轮播图 */.slider {max-width: 750px;min-width: 320px;margin: auto;padding: 0 10px;}.slider .imgs {max-height: 235px; }.slider .imgs img {height: 100%;width: 100%;border-radius: 10px;display: none;}.slider .imgs img.active {display: block; }/* 轮播图按钮组 */.slider .btns { display: flex; place-content: center;}.slider .btns span { width: 10px;height: 10px;background-color: #333;border-radius: 50%;margin: -16px 5px 5px;}.slider .btns span.active {background-color: #fff;}</style></head><body><div class="slider"><!-- 图片容器 --><div class="imgs"></div><!-- 切换按钮数量与图片数量必须一致 --><div class="btns"></div></div><script>let imgGroup = ["./images/banner-1.jpg","./images/banner-2.jpg", "./images/banner-3.jpg","./images/banner-4.jpg"];let imgs_div= document.querySelector('.imgs'); //获取到.imgs容器的div的classlet btn_div = document.querySelector('.btns')//获取到.ibtns容器的div的classfor (let i = 0; i < imgGroup.length; i++) {let img_src = imgGroup[i];lmg_src =`<a href=""><img src="${img_src}" alt=" " data-index ="${i+1}" /></a>`;lmg_src = imgs_div.insertAdjacentHTML('beforeend',lmg_src);let btn_one = ` <span data-index="${i+1}" onclick="setActive()"></span>`;btn_div.insertAdjacentHTML('beforeend',btn_one);}function display () {document.imgs_div.append(imgs_div);document.btn_div.append(btn_div);}window.addEventListener('load', display,false);// 1. 所有图片和按钮const imgs = document.querySelectorAll('.slider .imgs img');const btns = document.querySelectorAll('.slider .btns span');// 2. 设置激活状态function setActive() {// 1. 清空图片和按钮的状态imgs.forEach(img => img.classList.remove('active'));btns.forEach(btn => btn.classList.remove('active'));// Objedt.keys(obj): 返回键名组成的数组// console.log(Object.keys(btns));// 2.根据按钮的自定义data-index的值,来确定应该显示哪一张图片// 激活当前按钮event.target.classList.add('active');imgs.forEach(img => {if (img.dataset.index === event.target.dataset.index) {img.classList.add('active');}});}// 3. 定时播放setInterval(function (arr) {// 从头部取一个let index = arr.shift();// console.log(arr);// 将一个自定义的点击事件,分配给与当前索引对应的按钮上就可以了btns[index].dispatchEvent(new Event('click'));// 把头部取出来的,再尾部再追加上去arr.push(index);},2000,Object.keys(btns));</script></body></html>
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>*{box-sizing: border-box; margin: 0; padding: 0;}li{list-style: none;}a{text-decoration: none; color: #000;}.box{width: 980px; margin: 0 auto; }.box .menu{ display: flex;place-content: space-around; height: 39px; place-items: center;}.box .menu li{ width: 30%;text-align: center;border-radius:10px; border: 1px solid #000; font-size: larger; font-weight: bolder;}.box .menu .active{background-color: #f11717; color: #fff;border-radius:10px; border: 1px solid #f11717; }.box .list{width: 100%;display: none;}.box .list.active {display: block;}/* .search */.box .list .search_list{ width: 800px;margin: 0 auto;display: flex;flex-flow: column;place-content: center;place-items: center;}.box .list .search_list .title{ font-size: 20px; margin-top: 35px; font-weight: bolder;}.box .list .search_list p{ font-size: smaller; margin-top: 14px;}.box .list .search_list .searchcx{display: flex;width: 100%;height: 60px;place-content: center;}.box .list .search_list .searchcx b{width: 18px;height: 18px;background: url(https://www.php.cn/static/images/new/bg1.png) no-repeat -140px -65px;background: image-set(url(https://www.php.cn/static/images/new/bg1.png) 1x, url(/static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;background: -webkit-image-set(url(https://www.php.cn/static/images/new/bg1.png) 1x, url(/static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;margin: 22px 0px 0px 20px;}.box .list .search_list .searchcx input[type='search']{width: 600px;border: none;background:none;outline: none;margin-left: 10px;color: #999;}.box .list .search_list .searchcx button{width: 90px;border: none;background: #f11717;outline: none;margin-left: 10px;border-radius: 0 6px 6px 0;font-size: 14px;color: #fff;cursor: pointer;}/* 热门搜索 */.box .list .search_list .hot_search{margin-top: 30px;height: 32px;display: flex;place-content: start;width: 100%;align-items: center;}.box .list .search_list .hot_search span{padding: 0px 20px;}.box .list .search_list .hot_search a{border: 1px solid #e6e6e6;padding: 0px 20px;border-radius: 100px;font-size: small;}.box .list .search_list .hot_search a:hover{ border: 1px solid red;}/* 最新更新 */.box .list .kc_list{display: grid;grid-template-columns: repeat(5, 1fr);gap: 10px 15px;}.box .kc_list a{display: grid;width: 160px;grid-template-columns: repeat(2, 1fr);place-items: center;gap: 5px 5px;padding-top: 12px;}.box .kc_list span{grid-area: 1 /span 2;font-weight: bold;place-self: start;}.box .kc_list img{width: 38px;height: 38px;border-radius: 100px;place-items: end;}.box .kc_list p{width: 110px;place-items: start;font-size: smaller;}.box .list .update{width: 100%;height: 100%;}.box .list .update{margin-top: 16px;width: 100%;display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px 15px;place-items: center;}.box .update a{width: 200px;place-self: center;padding: 12px;background: #f7f8fa;border-radius: 100px;color: #333333;font-size: small;margin: 0 auto;text-align: center;}.box .update a:hover{background: #f11717;color: #ffffff}</style><body><div class="box"><!-- 三个按钮 --><ul class="menu"><li class="active" data-index="1">词典查询</li><li data-index="2">全部词典</li><li data-index="3">最近跟新</li></ul><!-- 三个列表 --><div class="list active" data-index="1"><div class="search_list"><div class="title">编程词典</div><p>服务码农的在线技术手册</p><div class="searchcx"><b></b><input type="search" name="" id="" value="请输入查询内容"><button>搜索</button></div><div class="hot_search"><span>热门搜索</span><a href="">PHP</a><a href="">MYSQL</a><a href="">JQUERY</a><a href="">HTML</a><a href="">CSS</a></div></div></div><div class="list" data-index="2"><div class="kc_list"><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a><a href=""><span>【学习 PHP】</span><img src="./img/php.png" alt=""><p>HP一种被广泛应用的开发...</p></a></div></div><div class="list" data-index="3"><div class="update"><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a><a href="">php array_diff_assoc()函数</a></div></div></div></body><script>// 事件冒泡const menu = document.querySelector('.menu');menu.addEventListener('click', show, false);menu.addEventListener('click', show, false);// show()function show() {// 禁用<a>的默认跳转行为event.preventDefault();const btns = [...event.currentTarget.children];const lists = document.querySelectorAll('.list');// 1. 将原来的标签高亮样式去掉,并把当前正在被点击的标签设置为高亮btns.forEach(item => item.classList.remove('active'));event.target.classList.add('active');// 2. 内容切换与标签切换原理一样,只不过多一个查询过程 data-indexlists.forEach(item => item.classList.remove('active'));lists.forEach(list => {if (list.dataset.index === event.target.dataset.index) {list.classList.add('active');}});}</script></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组api</title></head><body><script>//concat()数组合并const array1 = ['a', 'b', 'c'];const array2 = ['d', 'e', 'f'];const array3 = array1.concat(array2);console.log("数组合并");console.log(array3);console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");// 判断一个数组是否包含一个指定的值const pets = ['cat', 'dog', 'bat'];console.log("判断一个数组是否包含一个指定的值");console.log(pets.includes('cat'));console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引const array4 = [5, 12, 8, 130, 44];const isLargeNumber = (element) => element > 13;console.log("返回数组中满足提供的测试函数的第一个元素的索引");console.log(array4.findIndex(isLargeNumber));console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");// flatMap()将结果压缩成一个新数组const arr1 = [1, 2, [3], [4, 5], 6, []];console.log("将结果压缩成一个新数组");console.log("原数组"+ arr1);const flattened = arr1.flatMap(num => num);console.log(flattened);console.log("+++++++++++++++++++++");console.log("+++++++++++++++++++++");//toString() 返回一个字符串const arr= [1, 2, 'a', '1a'];console.log("返回一个字符串 ");console.log(array1.toString());</script></body></html>
