search

博客列表 >0728-数组：图片的自动加载、轮播图、仿写词典选项卡、方法实例演示

0728-数组：图片的自动加载、轮播图、仿写词典选项卡、方法实例演示

三九三伏
三九三伏原创
2022年08月21日 19:26:02340浏览

一、页面自动加载数组构成的图片

HMTL代码，必要地方都有注释。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="test.css">
  10. </head>
  11. <body>
  12.         <script>
  13.             const divSlider = document.createElement('div');
  14.             divSlider.classList.add('slider');
  15.             const divImgs = document.createElement('div');
  16.             divImgs.classList.add('imgs');
  17.             const divBtns = document.createElement('div');
  18.             divBtns.classList.add('btns');
  20.             // 将所有图片放在一个数组中
  21.             let imgGrps = ['./static/img/banner-1.jpg','./static/img/banner-2.jpg','./static/img/banner-3.jpg','./static/img/banner-4.jpg'];
  22.             const a = document.createElement('a');
  24.             function display(){    
  25.                 document.body.append(divSlider);
  26.                 divSlider.append(divImgs);
  27.                 divSlider.append(divBtns);
  28.                 divImgs.append(a);
  30.                 // 根据图片数量,动态添加图片到页面中。
  31.                 for(i=0; i < imgGrps.length; i++){      
  32.                     const img = document.createElement('img');
  33.                     img.src = imgGrps[i];
  34.                     img.dataset.index = i + 1;
  35.                     a.append(img);
  37.                     // 根据图片数量,动态创建按钮组,并动态添加到页面中。
  38.                     const span = document.createElement('span');
  39.                     span.dataset.index = i + 1;
  40.                     divBtns.append(span);   
  41.                     span.addEventListener('click',setActive,false);
  43.                     if(i == 0){
  44.                         img.classList.add('active');
  45.                         span.classList.add('active');
  46.                     }
  47.                 }    
  48.             }
  50.             // 在页面初始化时,自动加载内容,事件是 load。
  51.             window.addEventListener('load',display,false);
  53.         </script>
  54. </body>
  55. </html>

CSS(test.css)部分代码，必要地方都有注释。

  1. * {
  2.   margin:0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. a {
  8.   color: #555;
  9.   text-decoration: none;
  10. }
  12. li {
  13.   list-style: none;
  14. }
  16. /* ! 3. 轮播图 */
  17. .slider {
  18.   max-width: 750px;
  19.   min-width: 320px;
  20.   margin: auto;
  22.   padding: 0 10px;
  23. }
  25. .slider .imgs {
  26.   /* 图片容器必须要有高度,否则下面图片不能正常显示 */
  27.   max-height: 235px;
  28. }
  30. .slider .imgs img {
  31.   /* 图片完全充满父级空间显示 */
  32.   height: 100%;
  33.   width: 100%;
  34.   /* 图片带有圆角 */
  35.   border-radius: 10px;
  36.   /* 默认图片全部隐藏,只有有active的图片才显示 */
  37.   display: none;
  38. }
  40. /* 默认显示第一张 */
  41. .slider .imgs img.active {
  42.   display: block;
  43. }
  44. /* 轮播图按钮组 */
  45. .slider .btns {
  46.   /* 按钮水平一排显示,用flex,且水平居中 */
  47.   display: flex;
  48.   place-content: center;
  49. }
  50. .slider .btns span {
  51.   /* 按钮宽高相同,确定显示成一个正圆 */
  52.   width: 10px;
  53.   height: 10px;
  54.   /* 加上红色背景和数字是为了布局时可以看到,一会更去掉 */
  56.   background-color: #333;
  57.   /* 50%可确保显示为正圆 */
  58.   border-radius: 50%;
  59.   /* 按钮上外边距负值,可将它上移,可移动到图片中下方 */
  60.   margin: -16px 5px 5px;
  61. }
  62. .slider .btns span.active {
  63.   background-color: #fff;
  64. }
  66. .slider .btns span:hover {
  67.   cursor: pointer;  
  68. }

效果：

二、自动轮播图

没有使用load事件，使用函数每两秒触发一次点击。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="test.css">
  10. </head>
  11. <body>
  12.         <script>
  13.             const divSlider = document.createElement('div');
  14.             divSlider.classList.add('slider');
  15.             const divImgs = document.createElement('div');
  16.             divImgs.classList.add('imgs');
  17.             const divBtns = document.createElement('div');
  18.             divBtns.classList.add('btns');
  20.             // 将所有图片放在一个数组中
  21.             let imgGrps = ['./static/img/banner-1.jpg','./static/img/banner-2.jpg','./static/img/banner-3.jpg','./static/img/banner-4.jpg'];
  22.             const a = document.createElement('a');
  24.             document.body.append(divSlider);
  25.             divSlider.append(divImgs);
  26.             divSlider.append(divBtns);
  27.             divImgs.append(a);
  29.             // 根据图片数量,动态添加图片到页面中。
  30.             for(i=0; i < imgGrps.length; i++){      
  31.                 const img = document.createElement('img');
  32.                 img.src = imgGrps[i];
  33.                 img.dataset.index = i + 1;
  34.                 a.append(img);
  36.                 // 根据图片数量,动态创建按钮组,并动态添加到页面中。
  37.                 const span = document.createElement('span');
  38.                 span.dataset.index = i + 1;
  39.                 divBtns.append(span);   
  40.                 span.addEventListener('click',setActive,false);
  42.                 if(i == 0){
  43.                     img.classList.add('active');
  44.                     span.classList.add('active');
  45.                 }
  46.             }    
  48.             //获取所有看图片和按钮
  49.             const imgs = document.querySelectorAll('.slider .imgs img');
  50.                 // console.log(imgs);
  51.             const btns = document.querySelectorAll('.slider .btns span');
  52.                 // console.log(btns);
  54.             // 设置激活
  55.             function setActive(){
  56.                 // console.log("进来了！",btns,imgs);
  57.                 // 清除掉图片和按钮当前的active状态
  58.                 btns.forEach(btn => btn.classList.remove('active'));
  59.                 // console.log(btns);
  60.                 imgs.forEach(img => img.classList.remove('active'));
  61.                 // console.log(imgs);
  63.                 event.target.classList.add('active');
  64.                 // console.log(btns);
  65.                 imgs.forEach(img => {
  66.                     if(img.dataset.index == event.target.dataset.index){
  67.                         img.classList.add('active');
  68.                     }
  69.                 });
  70.                 // console.log(imgs);
  71.             }
  74.             // 定时播放
  75.             setInterval((arr) => {
  76.                 // 四张图轮播顺序，1234->2341 ->3412 ->4123 ->1234，始终循环取第一张图，放到最后。
  77.                 let index = arr.shift();
  78.                 // console.log(index);
  79.                 btns[index].dispatchEvent(new Event('click'));
  80.                 // console.log(btns[index]);
  81.                 arr.push(index);
  82.                 // console.log(arr);    
  83.             }, 2000, Object.keys('btns'));
  85.         </script>
  86. </body>
  87. </html>

css代码与第一部分相同，不再重复。
轮播效果：



三、仿写php中文网编程词典选项卡

HTML代码，必要地方都有注释。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="test.css">
  9.     <link rel="stylesheet" href="icon-font.css">
  10. </head>
  11. <body>
  12.     <!-- 整个区域:搞个大盒子在浏览器中布局 -->
  13.     <div class="box">
  14.         <!-- 菜单区域：搞个nav包起来菜单项，方便进行布局 -->
  15.         <nav class="menu">
  16.             <!-- 第一个选项卡菜单class默认为激活，data-index用于后面辅助查找，以便更改class属性值。 -->
  17.             <a href="" class="active" data-index="1">词典查询<b></b></a>    
  18.             <!-- 后面这两个没有class，后续通过js来增加并根据点击和悬停来修改对应的值。         -->
  19.             <a href="" data-index="2">全部词典<b></b></a>
  20.             <a href="" data-index="3">最近更新<b></b></a>
  21.         </nav>
  22.         <!-- 内容区域：搞得div布局 -->
  23.         <div class="content">
  24.             <!-- 第一部分内容：对应菜单”词典查询“，class的active值也是对应菜单的active，需要js来同步操作 -->
  25.             <div class="content-block block1 active" data-index="1">
  26.                 <!-- 第一部分内容用dl来布局                 -->
  27.                 <dl>
  28.                     <!-- 表头 -->
  29.                     <dt>
  30.                         <h2>编程词典</h2>
  31.                         <span>服务码农的在线技术手册</span>
  32.                     </dt>
  33.                     <!-- 第一行 -->
  34.                     <dd class="row1">
  35.                         <!-- 搞个div布局 -->
  36.                         <div class="search">
  37.                             <span class="iconfont icon-fangdajing"></span>
  38.                             <input type="text" value="请输入搜索内容" class="text1" name="keywords" 
  39.                             onclick="if(this.value == '请输入搜索内容') this.value='';"
  40.                             onblur="if(this.value == '') this.value='请输入搜索内容'">
  41.                             <input type="submit" value="搜索" name="" onclick="alert('搜索测试成功')" class="submit1">
  42.                             <!-- <button onclick="alert('搜索测试成功')" class="submit2">搜索</button> -->
  43.                         </div>
  44.                     </dd>
  45.                     <!-- 第二行 -->
  46.                     <dd class="row2">
  47.                         <!-- 搞个div布局 -->
  48.                         <div class="RMsearch">
  49.                             <em>热门搜索：</em>
  50.                             <span>
  51.                                 <a href="">PHP</a>
  52.                                 <a href="">MySQL</a>
  53.                                 <a href="">jQuery</a>
  54.                                 <a href="">HTML</a>
  55.                                 <a href="">CSS</a>
  56.                             </span>
  57.                         </div>    
  58.                     </dd>
  59.                 </dl>
  60.             </div>
  61.             <!-- 第二部分内容 -->
  62.             <div class="content-block block2" data-index="2">
  63.                 <!-- 第二部分内容用ul布局 -->
  64.                 <ul>
  65.                     <!-- 每个小块内容都用li包起来 -->
  66.                     <li>
  67.                         <!-- 小块内容放在一整个链接里 -->
  68.                         <a target="_blank" href="" title="" class="aBlack">
  69.                             <!-- 链接内部放一个dl -->
  70.                             <dl>
  71.                                 <dt>
  72.                                     【学习 PHP】
  73.                                 </dt>
  74.                                 <dd>
  75.                                     <span>
  76.                                         <img src="./static/img/php.png" alt="" style="display: block;">
  77.                                     </span>
  78.                                     <em>PHP一种被广泛应用的开...</em>
  79.                                 </dd>
  80.                             </dl>
  82.                         </a>
  83.                     </li>
  84.                     <li>
  85.                         <!-- 小块内容放在一整个链接里 -->
  86.                         <a target="_blank" href="" title="" class="aBlack">
  87.                             <!-- 链接内部放一个dl -->
  88.                             <dl>
  89.                                 <dt>
  90.                                     【学习 ThinkPHP】
  91.                                 </dt>
  92.                                 <dd>
  93.                                     <span>
  94.                                         <img src="./static/img/thinkphp.png" alt="" style="display: block;">
  95.                                     </span>
  96.                                     <em>ThinkPHP 是一个...</em>
  97.                                 </dd>
  98.                             </dl>
  100.                         </a>
  101.                     </li>
  102.                     <li>
  103.                         <!-- 小块内容放在一整个链接里 -->
  104.                         <a target="_blank" href="" title="" class="aBlack">
  105.                             <!-- 链接内部放一个dl -->
  106.                             <dl>
  107.                                 <dt>
  108.                                     【学习 Laravel】
  109.                                 </dt>
  110.                                 <dd>
  111.                                     <span>
  112.                                         <img src="./static/img/laravel.png" alt="" style="display: block;">
  113.                                     </span>
  114.                                     <em>Laravel是一套简洁...</em>
  115.                                 </dd>
  116.                             </dl>
  118.                         </a>
  119.                     </li>
  120.                     <li>
  121.                         <!-- 小块内容放在一整个链接里 -->
  122.                         <a target="_blank" href="" title="" class="aBlack">
  123.                             <!-- 链接内部放一个dl -->
  124.                             <dl>
  125.                                 <dt>
  126.                                     【学习 HTML】
  127.                                 </dt>
  128.                                 <dd>
  129.                                     <span>
  130.                                         <img src="./static/img/html.png" alt="" style="display: block;">
  131.                                     </span>
  132.                                     <em>html是HyperTe...</em>
  133.                                 </dd>
  134.                             </dl>
  136.                         </a>
  137.                     </li>
  138.                     <li>
  139.                         <!-- 小块内容放在一整个链接里 -->
  140.                         <a target="_blank" href="" title="" class="aBlack">
  141.                             <!-- 链接内部放一个dl -->
  142.                             <dl>
  143.                                 <dt>
  144.                                     【学习 CSS】
  145.                                 </dt>
  146.                                 <dd>
  147.                                     <span>
  148.                                         <img src="./static/img/css.png" alt="" style="display: block;">
  149.                                     </span>
  150.                                     <em>层叠样式表(英文全称：C...</em>
  151.                                 </dd>
  152.                             </dl>
  154.                         </a>
  155.                     </li>
  156.                     <li>
  157.                         <!-- 小块内容放在一整个链接里 -->
  158.                         <a target="_blank" href="" title="" class="aBlack">
  159.                             <!-- 链接内部放一个dl -->
  160.                             <dl>
  161.                                 <dt>
  162.                                     【学习 MySQL】
  163.                                 </dt>
  164.                                 <dd>
  165.                                     <span>
  166.                                         <img src="./static/img/mysql.png" alt="" style="display: block;">
  167.                                     </span>
  168.                                     <em>PHP一种被广泛应用的开...</em>
  169.                                 </dd>
  170.                             </dl>
  172.                         </a>
  173.                     </li>
  174.                     <li>
  175.                         <!-- 小块内容放在一整个链接里 -->
  176.                         <a target="_blank" href="" title="" class="aBlack">
  177.                             <!-- 链接内部放一个dl -->
  178.                             <dl>
  179.                                 <dt>
  180.                                     【学习 HTML5】
  181.                                 </dt>
  182.                                 <dd>
  183.                                     <span>
  184.                                         <img src="./static/img/html5.png" alt="" style="display: block;">
  185.                                     </span>
  186.                                     <em>HTML5它的综合性功能...</em>
  187.                                 </dd>
  188.                             </dl>
  190.                         </a>
  191.                     </li>
  192.                     <li>
  193.                         <!-- 小块内容放在一整个链接里 -->
  194.                         <a target="_blank" href="" title="" class="aBlack">
  195.                             <!-- 链接内部放一个dl -->
  196.                             <dl>
  197.                                 <dt>
  198.                                     【学习 CSS3】
  199.                                 </dt>
  200.                                 <dd>
  201.                                     <span>
  202.                                         <img src="./static/img/css3.png" alt="" style="display: block;">
  203.                                     </span>
  204.                                     <em>CSS即层叠样式表（Ca...</em>
  205.                                 </dd>
  206.                             </dl>
  208.                         </a>
  209.                     </li>
  210.                 </ul>
  211.             </div> 
  212.             <div class="content-block block3" data-index="3">  
  213.                 <div> 
  214.                     <a target="_blank" href="">
  215.                         php array_diff_assoc()函数
  216.                     </a>
  217.                     <a target="_blank" href="">
  218.                         php array_merge_recursive()函数
  219.                     </a>
  220.                     <a target="_blank" href="">
  221.                         TCP/IP 邮件
  222.                     </a>
  223.                     <a target="_blank" href="">
  224.                         TCP/IP 协议
  225.                     </a>
  226.                     <a target="_blank" href="">
  227.                         TCP/IP 寻址
  228.                     </a>
  229.                     <a target="_blank" href="">
  230.                         Web Forms - 数据库连接
  231.                     </a>
  232.                     <a target="_blank" href="">
  233.                         Web Forms - ArrayList 对象
  234.                     </a>
  235.                     <a target="_blank" href="">
  236.                         Web Forms - Button 控件
  237.                     </a>
  238.                 </div>    
  239.             </div>    
  240.         </div>    
  241.     </div>
  244.     <script>
  245.         const menu = document.querySelector('.menu');
  246.         // console.log(menu);
  247.         menu.addEventListener('click', show, false);
  248.         menu.addEventListener('mouseover', show, false);
  250.         function show(){
  251.             // 禁用超链接跳转
  252.             event.preventDefault();
  253.             const btns = [...event.currentTarget.children];
  255.             const contents = document.querySelectorAll('.content-block');
  256.             // console.log(ul);
  258.             // 1. 标签间切换：去掉原来的高亮，增加新选择的标签高亮。
  259.             btns.forEach(item => item.classList.remove('active'));    
  260.             event.target.classList.add('active');
  261.             // 2. 内容切换与标签切换基本一直，多一个data-index查询过程
  262.             contents.forEach(item => item.classList.remove('active'));
  263.             // contents.forEach(item =>{
  264.             //     if(item.dataset.index === event.target.dataset.index){
  265.             //         item.classList.add('active');
  266.             //     }
  267.             // });
  268.             [...contents].find(item => item.dataset.index === event.target.dataset.index).classList.add('active');
  269.         }
  270.     </script>
  271. </body>
  272. </html>

CSS代码(test.css)，必要地方都有注释。

  1. * {
  2.   margin:0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. a {
  8.   color: #555;
  9.   text-decoration: none;
  10. }
  12. li {
  13.   list-style: none;
  14. }
  16. .box {
  17.   font-size: 10px;
  18.   background: #ffffff; border-radius: 12px; margin-top:4em;
  19.   width: 980px;
  20.   height: 304px; 
  21.   border: 1px red solid;
  22.   margin: 32px auto;
  23. }
  25. .box .menu {
  26.   border-bottom: 1px solid #f6f6f6; margin: top 20px;
  27.   width: 980;
  28.   height: 39px;
  29.   display: grid; 
  30.   grid-template-columns: repeat(3,1fr);
  31.   text-align: center;
  32.   line-height: 32px;
  33.   /* border: solid 5px  coral; */
  34.   border-radius:  12px 12px 0 0;
  35. }
  37. .box .menu .active {
  38.   color: red;
  39.   background-color: #eee;
  40.   /* border-radius:  12px 12px 0 0; */
  41. }
  43. .box .menu .active:nth-of-type(1) {
  44.   border-radius:  12px 0 0 0;
  45. }
  47. .box .menu .active:nth-of-type(2) {
  48.   border-radius:  0;
  49. }
  51. .box .menu .active:nth-of-type(3) {
  52.   border-radius:   0 12px 0 0 ;
  53. }
  55. /* .box .menu .active .active {
  56.   background-color: red;
  57. } */
  59. .box .menu .active b{
  60.   display: block;
  61.   background-color: red;
  62.   width:18px; height:1px;  margin: auto; margin-top:1px;
  63. }
  65. .box .content {
  66.   width: 978px;
  67.   height: 244px;
  68. }
  70. .box .content-block{
  71.   padding: 10px; 
  72.   display: none;
  74. }
  76. .box .content-block.active {
  77.   display: block;
  78.   background-color: #ffffff;
  79. }
  81. .box .block1 dl {
  82.   width: 800px;
  83. }
  85. .box .block1 dl dt {
  86.   text-align: center;
  87.   margin-top: 35px;
  88. }
  90. .box .block1 dl dt h2 {
  91.   font-size: 20px; height: 24px; line-height: 24px; overflow: hidden; color: #333333; font-weight: bold;
  92. }
  94. .box .block1 dl dt p {
  95.   height: 18px; line-height: 18px; overflow: hidden; color: #666666; margin-top:14px;
  96. }
  98. .box .block1 dl .row1 {
  99.   width: 800px; height: 60px; border-radius: 6px; background: #fef6f6; margin-top:30px;
  100. }
  102. .box .block1 dl .row1 .search {
  103.   display: flex;
  104.   height: 60px;
  105.   place-content: space-between;
  106. }
  108. .box .block1 dl .row1 .search .icon-fangdajing {
  109.   /* background-color: red; */
  110.   font-size:2px;
  111.   color: #ccc;
  112.   width: 50px;
  113.   text-align: center;
  114.   line-height: 60px;
  115.   /* position: relative;
  116.   right: -15px;
  117.   top: 25px;  */
  118. }
  120. .box .block1 dl .row1 .search .icon-fangdajing:hover {
  121.   cursor: pointer;
  122. }  
  124. .box .block1 dl .row1 .text1 {
  125.   /* padding-left: 20px;  */
  126.   width: 800px;  
  127.   background: none; 
  128.   border: none; 
  129.   outline: none; 
  130.   /* margin-left:10px;  */
  131.   color: #999999;
  132. }
  134. .box .block1 dl .row1 .submit1 {
  135.   width: 90px; 
  136.   border: none; 
  137.   /* background: none;  */
  138.   background: #f11717; 
  139.   border-radius: 0px 6px 6px 0px; font-size: 16px; 
  140.   color: #ffffff; font-weight: bold; 
  141.   /* outline: none;  */
  142.   cursor: pointer;
  143. }
  145. .box .block1 dl .row2 {
  146.   width: 800px; height: 32px; overflow: hidden; margin-top:30px;
  147. }
  149. .box .block1 dl .row2 .RMsearch {
  150.   display: flex;
  151.   place-content: space-around;
  152. }
  154. .box .block1 dl .row2 .RMsearch em {
  155.   line-height: 32px;
  156.   width: 70px;
  157.   font-weight: normal;
  158.   font-style: normal;
  159. }
  161. .box .block1 dl .row2 .RMsearch span {
  162.   display: flex;
  163.   width: 720px;
  164.   height: 32px;
  165. }
  167. .box .block1 dl .row2 .RMsearch span a {
  168.   /* height: 32px; */
  169.   box-sizing: border-box; border: 1px solid #e6e6e6;
  170.   padding: 0px 20px; border-radius: 100px; line-height: 32px; color: #999999; text-decoration: none;
  171.   margin-right:20px;
  172. }
  174. .box .block1 dl .row2 .RMsearch span a:hover{
  175.   border: 1px solid #f11717; color: #f11717;
  176. }
  178. .box .block2 ul {
  179.   width: 900px;
  180.   height: 242px;
  181.   margin: auto;
  182.   display: grid;
  183.   grid-template-columns: repeat(4,1fr);
  184.   place-content: space-around;
  185. }
  187. .box .block2 ul li {
  188.   width:198px; height: 95px;
  189.   padding-left: 2.5px;
  190.   /* width:400px; height: 300px; */
  191.   /* border: 1px solid red; */
  192.   background: #f7f8fa; 
  193.   border-radius: 3px; 
  194.   /* padding-top: 12px;  */
  195.   /* margin: 27px 0px 0px 34px; */
  196.   display: grid; 
  198.   /* grid-auto-flow: row; */
  199.   /* grid-template-columns: repeat(2,100px); */
  200.   /* place-content: space-around space-around; */
  201.   /* place-items: start start; */
  202. }
  204. .box .block2 ul li a {
  205.   /* background-color: blue; */
  206.   /* border: 1px solid blue; */
  207.   display:grid;
  209. }  
  211. /* 设置dl宽度，dl网格化 */
  212. .box .block2 ul li a dl {
  213.   width: 160px; margin: auto;
  214.   display: grid;
  215. }
  217. /* 设置dt */
  218. .box .block2 ul li a dl dt {
  219.   height: 18px; line-height: 18px; overflow: hidden; font-weight: bold;
  220. }
  222. /* 设置dd拉开点距离,dd网格化 */
  223. .box .block2 ul li a dl dd {
  224.   margin-top:10px;
  225.   display: grid;
  226.   width: 160px;
  227.   height: 40px;
  228.   grid-template-columns: 40px 1fr;
  229. }
  231. /* 设置img */
  232. .box .block2 ul li a dl dd span img{
  233.   width: 38px; height: 38px; border-radius: 100px; margin-top:3px;background-color: green;
  234. }
  235. /* 设置em */
  236. .box .block2 ul li a dl dd em {
  237.   width: 110px; height: 40px; font-size: 12px; color: #999999; overflow: hidden; height: 40px; line-height: 22px;
  238.   /* background-color: blue; */
  239. }
  241. .box .block3 {
  242.   background-color: red;
  243.   width: 900px;   
  244.   height: 215px;
  245.   margin: auto;
  246.   overflow: hidden; 
  247.   margin-top:15px;
  248. }
  250. .box .block3 div {
  251.   display: grid;
  252.   grid-template-columns: repeat(4,1fr);
  253. }
  255. .box .block3 a {
  256.   height: 40px; background: #f7f8fa; 
  257.   padding: 0px 20px; border-radius: 100px; line-height: 40px; color: #333333; 
  258.   text-decoration: none; margin: 30px 13px 0px 0px;
  259. }
  261. .box .block3 a:hover {
  262.   background: #f11717; color: #ffffff;
  263. }

仿写效果如下：

四、一些数组方法实例演示

1. 数组的拆分和转换

‘…’ 和Array.from()
把一个数组拆开成单个元素

  1.         let arr = [1, 2, 3, 4, 5];
  2.             //打印原数组
  3.             console.log(arr);
  4.             //拆成一组单个值
  5.             console.log(...arr);
  6.             //将一组单个值重新组成数组
  7.             console.log([...arr]);


此方法也适用类数组对象，但对没有迭代器接口的对象不适用。

  1.         let obj = {
  2.             0:1,
  3.             1:2,
  4.             2:3,
  5.             length:3
  6.         };         
  7.         console.log(obj);
  8.         console.log(...obj);


可以采用Array.from()来拆除这组单值

  1.         let objArr = {
  2.             0:1,
  3.             1:2,
  4.             2:3,
  5.             length:3
  6.         };         
  7.         console.log(objArr);
  8.         console.log(...Array.from(objArr));

2. 数组元素的删除和增加

2.1 shift和push

利用shift和push完成队列功能

  1.         let arr = [1, 2, 3, 4, 5];
  2.          console.log(arr);
  4.         arr.shift();
  5.         arr.push(10);
  6.         console.log(arr);

2.2 fill

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

  1.             const arr1 = [1, 2, 3, 4];
  2.             // 用0填充数组，从索引2开始填充直至索引4-1，也就是索引3，也就是结尾。
  3.             console.log(arr1.fill(0, 2, 4));
  4.             // 用5填充数组，从索引1开始直到最后。
  5.             console.log(arr1.fill(5, 1));
  6.             // 用6填充数组，直到最后。
  7.             console.log(arr1.fill(6));

3. 数组的迭代方法

foreach,map
every，some
filter，find，findindex
reduce
entry

3.1 foreach和map

foreach

forEach() 方法对数组的每个元素执行一次给定的函数。

  1.             let arr = [1, 2, 3, 4, 5];
  2.             let res = arr.forEach((value,index,arr) =>{
  3.                 console.log(index,value,arr);
  4.             });

map

foreach()没有返回值,map()与其基本一样，但有返回值。

  1.             res = arr.map((value,index,arr) =>{
  2.                 console.log(index,value,arr);
  3.                 return value*2;
  4.             });
  5.             console.log(res);

3.2 every和some

被称为断言函数，用来做判断用。
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

  1.             console.log(arr);
  2.             // 数组成员的值是否每个都小于2
  3.             console.log(arr.every(item => item< 2));
  4.             // 数组成员的值有都小于2的
  5.             console.log(arr.some(item => item<2));

3.3 filter和find、findindex

filter

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

  1.             // filter返回符合条件值组成的新数组
  2.             console.log(arr.filter(item => item<4));
  3.             // 只返回符合条件的第一个值
  4.             console.log(arr.filter(item => item<4)[0]);

find、findindex

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

  1.             console.log(arr);
  2.             // 返回第一个符合条件的
  3.             console.log(arr.find(item => item<4));
  4.             // 返回符合条件值得索引
  5.             console.log(arr.findIndex(item => item<4));

3.4 reduce

归并的效果
reduce（param1，param2）
param1，回调函数，函数还有四个参数分别累加值（必选），数组当前值（必选），数组索引（可选），数组本身（可选）
param2，累加的初始值

  1.             console.log(arr);
  2.             // reduce第一个参数是回调函数，第二个是累加初始值，即acc = 10.cur为当前数组值。
  3.             res = arr.reduce((acc, cur, index, arr) => acc + cur,10);
  4.             // 10（acc）+1（cur）+2（cur）+3（cur）+4（cur）+5（cur）=25
  5.             console.log(res);

3.5 entry

entry()方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

  1.             const arr1 = ['a', 'b', 'c'];
  2.             const iterator1 = arr1.entries();
  3.             console.log("iterator长这样：",iterator1);
  4.             console.log("iterator.next()长这样：", iterator1.next());
  5.             console.log("iterator.next().done没开始遍历时的值：", iterator1.next().done);
  6.             console.log(iterator1.next().value);
  7.             console.log(iterator1.next().value);
  8.             console.log(iterator1.next().value);
  9.             console.log("这里就越界了：", iterator1.next().value);
  10.             console.log("iterator.next().done遍历完的值：", iterator1.next().done);

4. 数组的排序

  1.             let arr = [1, 10, 20, 6];
  2.             console.log(arr);
  3.             // sort默认将数组成员当成字符串进行排序，用asii码值。
  4.             console.log(arr.sort());
  5.             // sort升序排序
  6.             console.log(
  7.                 arr.sort(((a,b)=> a -b))
  8.             );


反过来使用b-a就是降序，就不展示效果了。

5. 数组转字符串

join

  1.             let arr = [1, 10, 20, 6];
  2.             // alert弹窗的效果就是数组转换的字符串
  3.             alert(arr);
  4.             // join效果与alert转化的效果一样，默认是逗号分割的字符串。
  5.             console.log(arr.join());
  6.             // 跟换成其他符号
  7.             console.log(arr.join('*'));

弹窗

join的效果

6. 数组的截取和拼接

6.1 slice

  1. let arr = [1, 2, 3, 4, 5, 6, 7, 8 , 9, 10, 20];
  2.             console.log(arr);
  3.             console.log('截取2-4：');
  4.             console.log(arr.slice(2,5));
  5.             console.log('截取从2到最后：');
  6.             console.log(arr.slice(2));
  7.             console.log('截取倒数第四到倒数第六：');
  8.             console.log(arr.slice(-6,-3));

6.2 splice

  1.             console.log('原数组如下：');
  2.             console.log(arr);
  3.             console.log('从数组索引1开始拿出来两个元素：');
  4.             console.log(arr.splice(1,2));
  5.             console.log('原数组相当于删除了两个：');
  6.             console.log(arr);
  7.             console.log('从数组索引1开始再拿出来两个元素，同时把a，b放进去：');
  8.             console.log(arr.splice(1,2,'a','b'));
  9.             console.log('原数组相当于更新了两个值：');
  10.             console.log(arr);
  11.             console.log('从数组索引1开始拿出来0个元素，同时把a，b放进去：');
  12.             console.log(arr.splice(1,0,'a','b'));
  13.             console.log('原数组相当于插入了两个值：');
  14.             console.log(arr);

6.3 concat

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

  1.             const arr1 = ['a', 'b', 'c'];
  2.             console.log("arr1:",arr1);
  3.             const arr2 = ['d', 'e', 'f'];
  4.             console.log("arr2:",arr2);
  5.             const arr3 = arr1.concat(arr2);
  6.             console.log("拼接arr1和arr2的结果：", arr3);

6.4 copyWithin

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

  1.             const arr1 = ['a', 'b', 'c', 'd', 'e'];
  2.             console.log(arr1);
  3.             // 把第3个数组元素值复制到第0个数组元素开始的地方
  4.             console.log(arr1.copyWithin(0, 3, 4));
  5.             // 把第3至最后一个数组元素值复制到第0个数组元素开始的地方
  6.             console.log(arr1.copyWithin(1, 3));
  7.             // 把第2和第3个数组元素值复制到第1个数组元素开始的地方
  8.             console.log(arr1.copyWithin(1, 2, 4));

6.5 flat

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。即扁平化展开一个数组，解嵌套。

  1.             // 嵌套数组的展开
  2.             let arr1 = [1, 2, [3, 4]];
  3.             console.log(arr1.flat());
  4.             // 两层数组只能被展开一层
  5.             let arr2 = [1, 2, [3, 4, [5, 6]]];
  6.             console.log(arr2.flat());
  7.             // 展开2层嵌套的数组
  8.             let arr3 = [1, 2, [3, 4, [5, 6]]];
  9.             console.log(arr3.flat(2));
  10.             //使用 Infinity，可展开任意深度的嵌套数组
  11.             let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
  12.             console.log(arr4.flat(Infinity));

上一条：React Hooks深入-useEffect，usecallback，useMemo区别下一条：vue条件渲染与列表渲染
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多