Home > List of blog posts > . 将所有图片放在一个数组中, 并动态添加到页面中 2. 根据图片数量,动态创建按钮组,并动态添加到页面中 3. 在页面初始化时,自动加载以上内容,事件是 load 4. [选做]: 为轮播图添加翻页按钮,提供翻页功能,提示:参考定时播放 5. 仿写php中文网编程词典选项卡 6. 任选5个课程上没讲过的数组方法,实例演示

Blogger Information

Blog 46

fans 2

comment 0

visits 19144

Special Recommendation

More>

Related recommendations

图片加到数组与按钮动态添加

<!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>实战2-经典轮播图</title>
    <style>
        /* ! 3. 轮播图 */
        .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;
          /* 默认图片全部隐藏,只有有active的图片才显示 */
          display: none;
        }
        /* 默认显示第一张 */
        .slider .imgs  a  img.active {
          display: block;
        }
        /* 轮播图按钮组 */
        .slider .btns {
          /* 按钮水平一排显示,用flex,且水平居中 */
          display: flex;
          place-content: center;
        }
        .slider .btns span {
          /* 按钮宽高相同,确定显示成一个正圆 */
          width: 10px;
          height: 10px;
          /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
          background-color: #333;
          /* 50%可确保显示为正圆 */
          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>
   //获取照片盒子的元素
   const imgs = document.querySelector('.imgs');
   const btns = document.querySelector('.btns');
  //  console.log(imgs);
// 创建照片组
const imgGroup = ["../0728/images/banner-1.jpg","../0728/images/banner-2.jpg","../0728/images/banner-3.jpg"];
for(let i = 0 ; i < imgGroup.length ; i++){
    const aa = document.createElement('a');
    // 在 imgs照片组内添加aa的标签
    imgs.append(aa);
    const span = document.createElement('span');
    // 在 btns按钮组内添加的标签
    btns.append(span);
    //     a标签里面放img
    let img = document.createElement('img');
  aa.append(img)
    }
    const img1 = document.querySelectorAll('.imgs a img');
    //这一步是给第一张图片加上active图片
    img1[0].classList.add('active');
    //遍历img1给img标签添加对于的东西
    img1.forEach((item,k)=>{
      // 变量添加属性
      item.src=imgGroup[k];
      // 遍历添加自定义属性
      item.setAttribute('data-index',k+=1);
    })
    //获取所有按钮
    const btns1 = document.querySelectorAll('.btns span') 
  //给第一个按钮添加样式
  btns1[0].classList.add('active');
  //遍历按钮组给对应的按钮添加data-index
  btns1.forEach((item,k)=>item.setAttribute('data-index',k+=1));
//遍历按钮添加点击事件
btns1.forEach(function(item1,k){
  //遍历拿到所有按钮
  item1.onclick = function(){
    //点击按钮重新遍历按钮类数组并且清空active类
    btns1.forEach(item2=>item2.classList.remove('active'))
    // 点击时将类添加
    item1.classList.add('active')
    //遍历图片类数组
    img1.forEach((item,k)=>{
      //删除图片的active类
      item.classList.remove('active')
      // 判断按钮和图片的自定义属性的值是否一样 一样的时候就给图片添加active类
      if(item1.dataset.index === item.dataset.index){
        item.classList.add('active')
      }
    })
    console.log(k);
// console.log('================');
// console.log('================');
  }
})
setInterval(
        function (arr) {
          // 从头部取一个
          let index = arr.shift();
          //   console.log(arr);
          //   将一个自定义的点击事件,分配给与当前索引对应的按钮上就可以了
          btns1[index].dispatchEvent(new Event('click'));
          // 把头部取出来的,再尾部再追加上去
          arr.push(index);
        },
      1000,
        Object.keys(btns1)
      );
// console.log('================');
 </script>
</body>
</html>

选项卡

<!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>实战1-经典选项卡</title>
<style>
        /* 初始化 */
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        color: #555;
        text-decoration: none;
      }
      li {
        list-style: none;
      }
      .box {
        width: 30em;
        border: 1px solid #000;
        margin: 2em auto;
      }
      .box nav {
        height: 2em;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
        line-height: 2em;
      }
      .box nav a.active {
        background-color: #ddd;
        color: red;
      }
      .box .list {
        padding: 1em;
        display: none;
      }
      .box .list.active {
        display: block;
        background-color: #ddd;
      }
      .box .list a {
        font-size: smaller;
      }
      .box .list a:hover {
        color: red;
      }
</style>
</head>
<body>
    <div class="box">
        <!-- 1. 标签 -->
        <nav class="menu">
          <a href="" class="active" data-index="1">安徽</a>
          <a href="" data-index="2">全国</a>
          <a href="" data-index="3">国际</a>
        </nav>
        <!-- 2. 内容列表 -->
        <ul class="list active" data-index="1">
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
          <li><a href="">安徽也想治愈你的精神内耗！</a></li>
        </ul>
        <ul class="list" data-index="2">
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
          <li><a href="">第五届数字中国建设30项最佳成果出炉</a></li>
        </ul>
        <ul class="list" data-index="3">
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
          <li><a href="">佩洛西访台闹剧，令美方骑虎难下</a></li>
        </ul>
      </div>
<script>
//   事件冒泡  拿到父类 导航     ,然后通过父类知道是哪个子类触发
const menu = document.querySelector('.menu');
menu.addEventListener('click', show, false);
// menu.addEventListener('click', show, false);
function show(){
    // 禁用a标签的默认跳转行为
    event.preventDefault();
    const btns = [...event.currentTarget.children];
    console.log(btns);
    console.log('----');
    console.log(event.target);
    console.log('----');
   const lists = document.querySelectorAll('.list');
   console.log(lists);
//    1、将原来的 nav的标签高亮标签  去掉，并把当前正在被点击的标签设置为高亮
btns.forEach (item => item.classList.remove('active')) ;
// 拿到当前时间触发者
console.log(event.target);
event.target.classList.add('active');
    // 2. 内容切换与标签切换原理一样,只不过多一个查询过程 data-index
    lists.forEach (item => item.classList.remove('active')) ;
    lists.forEach(lists => {
        if (lists.dataset.index == event.target.dataset.index){
            lists.classList.add('active');
        }
    });
//  简化 find()  一组里面拿到一个是数组的api    但是lists 不是类数组需要【】
// [...lists].find(list => list.dataset.index === event.target.dataset.index).classList.add('active');
}
</script>
</body>
</html>

数组排序、更新、删除

<!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>数组api-4</title>
</head>
<body>
    <script>
// sort()  排序 默认将数组成员当成字符串
let arr = [1,2,3,6,5,4];
console.log(arr);
console.log(arr.sort());
// 升序
console.log(arr.sort(function(a,b){
  return a-b;
}));
// 降序
console.log(arr.sort(function(a,b){
  return b-a;
}));
// 简化
console.log(arr.sort((a,b) => b-a));
   // join: 将数组转为字符串   array -> string
console.log(arr.join());
console.log(arr.join('*'));
   // slice: 子元素  支持负数
 arr = [10,11,12,14,151,161,7];
// 索引  ，从左到右 1  到5   个
// 从右到左  -3  到 -1   个
console.log(arr.slice(-3,-1));
// 删除 splice: 删除子元素
console.log(arr);
// 1: 表示起始索引, 2: 表示删除的数量,返回被删除元素组成的数组
console.log(arr.splice(1,3));
console.log('===');
     // update, 传入与删除数量相同的参数,来替换掉被删除的元素
     console.log(arr);
     console.log('------');
     console.log(arr.splice(1, 2, 'a', 'b'));
     console.log('------');
        console.log(arr);
        console.log('===');
      //   insert: 删除数量为0,就是新增操作,当然要传入新增的元素
      console.log(arr.splice(1, 0, 'a', 'b', 'c'));
      console.log(arr);
    </script>
</body>
</html>

数组迭代

<!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>数组api-3</title>
</head>
<body>
    <script>
    //    迭代方法： 逐个取出数组成员，并逐个处理一遍 
    //   方法一：forEach  , map
// forEach((item,index,arr)=>())    注意没有返回值，适合dom操作
let arr = [1,2,3,4,5,6];
//  遍历每个值item    index  索引     
let res = arr.forEach((item,index,arr) =>{
    console.log('key:'+index,'value:'+item );
    console.log(arr);
    // 添加文档 
    document.body.append( item );
})
    //   map() 参数 与 forEach  一样，但是有返回值 数组  结果有用 用map
    res =arr.map(item => {
        return item*2
    });
    console.log(res);
//   方法二： every  some   断言函数，返回 true  或false
// every  全部满足  返回 true      否则 false
console.log(arr.every(function(item){
     return item >3;
} ));
console.log(arr.every(function(item){
     return item >0;
} ));
// 简化
console.log(arr.every(item=> item >0));
console.log('=======');
// some  部分满足  返回 true      否则 false
console.log(arr.some(function(item){
     return item >3;
} ));
console.log('=======');
//  方法三  filter   返回满足条件的新数组
console.log(arr.filter(item => item>3));
// 获取数组中第一个满足条件的成员
console.log(arr.filter(item => item>3)[0]);
// 简化
// 获取数组中第一个满足条件的成员
console.log(arr.find(item => item>3));
// 获取数组中第二个满足条件的成员的索引 
console.log(arr.findIndex(item => item>3));
console.log('开始');
      // reduce: 归并                                    ,index, arr是可选参数
    //   res = arr.reduce(function (acc, cur, index, arr) 
res =  arr.reduce(function(acc,cur,index,arr){
    console.log(arr);
    console.log('----');
    console.log(acc,cur, index, arr);
    console.log('----');
    return acc + cur ;
    console.log('=======');
// 默认初值0   可以是  其他数值
},0);
console.log('简化');
// 简化
res = arr.reduce((acc, cur) => acc + cur, 10);
console.log(res);
    </script>
</body>
</html>

数组添加移除

<!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>数组api-2</title>
</head>
<body>
    <script>
    let  arr = [];
    // push  ：从数组尾部添加、追加
  arr.push(10);
  arr.push(20);
  arr.push(30);
   // pop  ：从数组尾部删除
  arr.pop();
   // pop  ：从数组头部添加
   arr.unshift(40);
   arr.unshift(50);
    // shift ：从数组头部删除
    arr.unshift();
console.log(...arr);
console.log('==========');
// 队列
// 1、push  shift  尾部追加，头部删除
arr.push(90,100,120);
arr.shift();
console.log(...arr);
console.log('==========');
// 2、pop  unshift  尾部删除  头部追加，
arr.unshift(130,150,160);
arr.pop();
console.log(...arr);
console.log('==========');
    </script>   
</body>
</html>

数组转换

<!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>数组api-1</title>
</head>
<body>
    <script>
        let arr = [1,2,3,'hello',false,{x:1,y:2},[5,6,7],function(){console.log('word');}];
        console.log(arr);
        //  。。。 离散值打包到数组   ，可以将类数组转为数组
        console.log(...arr);
        console.log([...arr]==arr);
        console.log([...arr][1] ==arr[1]);
    //    类数组
    const obj =  {
        // 注意索引
        0:1 ,
        1 :2,
        //  注意一定要有length
        length :2,
    }
    // 对象
console.log(obj);
// 对象转数组
console.log(Array.from(obj));
// 类数组转为真数组两种方式
// 一、。。。rest    要求对象接口有可迭代器接口
// 二 。  Array。from   不需要
        </script>
</body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdownm语法

2022-07-02 10:53:43

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

图片加到数组与按钮动态添加

选项卡

数组排序、更新、删除

数组迭代

数组添加移除

数组转换

图片加到数组与按钮动态添加

选项卡

数组排序、更新、删除

数组迭代

数组添加 移除

数组转换

数组添加移除