search

博客列表 >仿京东轮播图 php中文网编程词典选项卡 数组api

仿京东轮播图 php中文网编程词典选项卡 数组api

喜
喜原创
2022年07月30日 17:50:24502浏览

1. 仿京东轮播图

查看地址：http://m.qpic.cn/psc?/V521qPfX3KXqTE186bXV20iIm90jfTgK/ruAMsa53pVQWN7FLK88i5tP1snw8lKJOBrWoSg2zZKoqAgbBfWwDrEzbpUAWbA3I7hkNI.hiUemmCyEqEV6QvBtRmrQu6dKYX5U6T4lTp*8!/b&bo=lwQ4BAAAAAACB4w!&rf=viewer_4

1.1代码

  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.    <link rel="stylesheet" href="../轮播图/download/font_3459154_rs8v47xcmr/iconfont.css">
  8.    <title>Document</title>
  9. </head>
  10. <style>
  11.    *{
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.    }
  16.    img{
  17.       position: absolute;
  18.       top: 0;
  19.       left: 0;
  20.       width: 100%;
  21.       opacity: 0;
  22.       transition: all 0.5s;
  23.    }
  24.    .img{
  25.       margin: 100px auto;
  26.       position: relative;
  27.       width: 600px;
  28.       height: 470px;
  29.    }
  30.    .tp,.dw,.yuand{
  31.       cursor: pointer;
  32.    }
  33.    .dw{
  34.       width: 100%;
  35.       position: absolute;
  36.       display: flex;
  37.       justify-content: space-between;
  38.       top: 50%;
  39.       transform: translateY(-50%)
  40.    }
  41.    .dw>span{
  42.       font-size: 13px;
  43.       color: rgba(255,255,255,.8);
  44.     width: 25px;
  45.     height: 35px;
  46.     line-height: 35px;
  47.     background-color: #d9d9d9;
  48.     background-color: rgba(0,0,0,.15);
  49.    }
  50.    .dw span:hover{
  51.       background-color: rgba(0,0,0,.4);
  52.    }
  53.    .dw span:first-of-type{
  54.       padding-left: 5px;
  55.       border-top-right-radius: 18px;
  56.     border-bottom-right-radius: 18px;
  57.    }
  58.    .dw span:last-of-type{
  59.       padding-left: 8px;
  60.       border-top-left-radius: 18px;
  61.     border-bottom-left-radius: 18px;
  62.    }
  63.    .yuand{
  64.       display: flex;
  65.       position: absolute;
  66.       left: 30px;
  67.     bottom: 20px;
  68.    }
  69.    .yuand span{
  70.       margin-right: 5px;
  71.       border-radius: 50%;
  72.       width: 8px;
  73.       height: 8px;
  74.       border: 1px solid rgba(0,0,0,.05);
  75.     background: rgba(255,255,255,.4);
  76.    }
  77.    .yuand .active{
  78.     background-color: white;
  79.    }
  80.   img.active{
  81.       opacity: 1;
  82.    }
  83. </style>
  84. <body>
  85.  <div class="img">
  86.    <div class="tp"></div>
  87.   <div class="dw">
  88.    <span class="iconfont icon-zuo"></span>
  89.    <span class="iconfont icon-you"></span>
  90.   </div>
  91.    <div class="yuand">
  92.    </div>
  93.  </div>
  94. </body>
  95. <script>
  96.    let arr=[
  97.       {src:'../轮播图/1.jpg'},
  98.       {src:'../轮播图/2.jpg'},
  99.       {src:'../轮播图/3.jpg'},
  100.       {src:'../轮播图/4.jpg'},
  101.       {src:'../轮播图/5.jpg'},
  102.       {src:'../轮播图/6.jpg'},
  103.       {src:'../轮播图/7.jpg'},
  104.       {src:'../轮播图/8.jpg'},
  105.    ]
  106.    for(let i=0;i<arr.length;i++){
  107.       let img=document.createElement('img')
  108.       img.src=arr[i].src
  109.    document.querySelector('.tp').append(img)
  110.       let span=document.createElement('span')
  111.       span.setAttribute('data-t',i+1)
  112.       document.querySelector('.yuand').append(span)
  113.    }
  114.    document.querySelector('img').classList.add('active')
  115.    document.querySelector('.yuand span').classList.add('active')
  117.    let img=document.querySelectorAll('img')
  118.    let span=document.querySelectorAll('.yuand span')
  119.    let you=document.querySelector('.icon-you')
  120.    let zuo=document.querySelector('.icon-zuo')
  123.    let i=0
  124. function gg(){     
  125.    img.forEach( i=>i.classList.remove('active'))
  126.    span.forEach(i=>i.classList.remove('active'))
  128.    span[i].classList.add('active')
  129. img[i].classList.add('active')
  130. }
  131. you.addEventListener('click',()=>{
  132.    i++
  133.    i>arr.length-1?i=0:i
  134.    gg()
  135. })
  136. zuo.addEventListener('click',()=>{
  137.    i--
  138.    i<0?i=arr.length-1:i
  139.    gg()
  140. })
  142. let t=setInterval(()=>you.click(),2000)
  143. let zon=document.querySelector('.img')
  144. zon.addEventListener('mouseenter',()=>clearInterval(t))
  145. zon.addEventListener('mouseleave',()=>{t=setInterval(()=>you.click(),2000)})
  147. span.forEach(it=>{
  148.   it.addEventListener('mouseenter',function(){
  149.     span.forEach(item=>item.classList.remove('active'))
  150.      this.classList.add('active')
  151.    i=this.dataset.t-1
  152.    img.forEach( i=>i.classList.remove('active'))
  153. img[i].classList.add('active')
  154.   })
  155. })
  156. </script>
  157. </html>

2.php中文网编程词典选项卡

2.1代码

  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     a{
  16.         text-decoration: none;
  17.         color: #333;
  18.     }
  19.     li{
  20.         list-style: none;
  21.     }
  22.     .box{
  23.         width: 980px;
  24.         margin: 50px auto;
  25.     }
  26.     .box .top{
  27.         display: grid;
  28.         grid-template-columns: repeat(3,144px);
  29.         height: 39px;
  30.     border-bottom: 1px solid #f6f6f6;
  31.     margin-top: 20px;
  32.     }
  33.     .box .top a{
  34.         margin: 0 40px;
  35.         font-weight: bold;
  36.     }
  37.     .box .top b{
  38.         width: 18px;
  39.     height: 3px;
  40.     background: #fff;
  41.     display: block;
  42.     margin: auto;
  43.     margin-top: 15px;
  44.     }
  45.     .box .top .active a{
  46.         color: #f11717;
  47.     }
  48.     .box .top .active b{
  49.         background-color: #f11717;
  50.     }
  51.     .box .bottom{
  52.         margin: 35px 90px;
  53.         display: grid;
  54.         grid-template-rows: 24px 18px 60px 32px;
  55.         gap: 20px ;
  56.     }
  57.     .box .bottom h3,p:first-of-type{
  58.         text-align: center;
  59.     }
  60.     .box .bottom p:first-of-type{
  61.         font-size: 14px;
  62.         color: #666;
  63.     }
  64.     .box .bottom input{
  65.         padding-left: 50px;
  66.         width: 100%;
  67.         height: 100%;
  68.         outline: none;
  69.         border: none;
  70.         background-image: linear-gradient(to right, gold, pink);
  71.         border-radius: 6px;
  72.     }
  73.     .box .bottom .search{
  74.         position: relative;
  75.     }
  76.     .box .bottom .search button{
  77.         position: absolute;
  78.         right: 0;
  79.         bottom: 0;
  80.         width: 90px;
  81.     height: 60px;
  82.     border: none;
  83.     background: #f11717;
  84.     float: right;
  85.     border-radius: 0px 6px 6px 0px;
  86.     font-size: 16px;
  87.     color: #ffffff;
  88.     font-weight: bold;
  89.     outline: none;
  90.     cursor: pointer;
  91.     }
  92.     .box .bottom .search span{
  93.         position: absolute;
  94.         bottom: 50%;
  95.         transform: translateY(50%);
  96.         left: 0;
  97.         display: block;
  98.     width: 18px;
  99.     height: 18px;
  100.     line-height: 60px;
  101.     background: url(https://www.php.cn//static/images/new/bg1.png) no-repeat -140px -65px;
  102.     background: image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;
  103.     background: -webkit-image-set(url(https://www.php.cn//static/images/new/bg1.png) 1x, url(https://www.php.cn//static/images/new/bg1-2x.png) 2x) no-repeat -140px -65px;
  104.     margin: 22px 0px 0px 20px;
  105.     }
  106.     .box .bottom p span{
  107.         float: left;
  108.         font-size: 14px;
  109.         color: #000;
  110.         display: block;
  111.         margin-right: 20px;
  112.     line-height: 32px;
  113.     }
  114.     .box .bottom p a{
  115.         display: block;
  116.     float: left;
  117.     height: 28px;
  118.     border: 1px solid #e6e6e6;
  119.     padding: 0px 20px;
  120.     border-radius: 100px;
  121.     text-align: center;
  122.     line-height: 28px;
  123.     color: #999999;
  124.     margin-right: 20px;
  125.     }
  126.     .box .bottom p a:hover{
  127.         border: 1px solid #f11717;
  128.         color: #f11717;
  129.     }
  130.     ul.xxk{
  131.         padding: 27px 40px;
  132.         display: grid;
  133.         grid-template-columns: repeat(4,200px);
  134.         grid-template-rows: repeat(2,95px);
  135.         gap: 34px;
  136.     }
  137.     ul.xxk a{
  138.         width: 100%;
  139.         height: 100%;
  140.         background: #f7f8fa;
  141.  padding: 12px 14px;
  142.         border-radius: 3px;
  143.         display: grid;
  144.         grid-template-rows: 18px 1fr;
  145.     }
  146.     ul.xxk a img{
  147.         width: 38px;
  148.     height: 38px;
  149.     border-radius: 100px;
  150.     margin-top: 3px;
  151.     }
  152.     ul.xxk a h3{
  153.         font-size: 14px;
  154.     }
  155.     ul.xxk a .tp{
  156.         display: flex;
  157.         font-size: 12px;
  158.         color: #999;
  159.         align-items: center;
  160.     }
  161.     .lm{
  162.         width: 900px;
  163.     margin: auto;
  164.     height: 215px;
  165.     margin-top: 15px;
  166.     }
  167.     .lm a{
  168.         font-size: 14px;
  169.         display: block;
  170.     float: left;
  171.     height: 40px;
  172.     background: #f7f8fa;
  173.     padding: 0px 20px;
  174.     border-radius: 100px;
  175.     line-height: 40px;
  176.     color: #333333;
  177.     text-decoration: none;
  178.     margin: 30px 13px 0px 0px;
  179.     }
  180.     .lm a:hover{
  181.        background-color: #f11717;
  182.        color: #fff;
  183.     }
  184.     ul.xxk,.box .bottom ,.lm{
  185.        display: none;
  186.     }
  187.     ul.xxk.active,.box .bottom.active{
  188.       display: grid;
  189.     }
  190.     .lm.active{
  191.         display: block;
  192.     }
  193. </style>
  194. <body>
  195.     <div class="box">
  196. <ul class="top">
  197.    <li class="active" data-t="1">
  198.     <a href="#">词典查询</a>
  199.     <b></b>
  200.    </li>
  201.     <li data-t="2">
  202.         <a href="#">全部词典</a>
  203.     <b></b>
  204.     </li>
  205.   <li data-t="3">
  206.     <a href="#">最近更新</a>
  207.     <b></b>
  208.   </li>
  209. </ul>
  210. <div class="bottom active" data-t="1">
  211.     <h3>编程词典</h3>
  212.     <p>服务码农的在线技术手册</p>
  213.     <div class="search">
  214.         <input type="text" placeholder="请输入查询内容">
  215.         <span></span>
  216.         <button>搜索</button>
  217.     </div>
  218.     <p><span>热门搜索:</span>
  219.         <a href="#">PHP</a>
  220.         <a href="#">MySQL</a>
  221.         <a href="#">Jquery</a>
  222.         <a href="#">HTML</a>
  223.         <a href="#">CSS</a>
  224.     </p>
  225. </div>
  227. <ul class="xxk" data-t="2">
  228.     <li><a href="#">
  229. <h3>【学习 PHP】</h3>
  230. <div class="tp">
  231.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  232.     <p>PHP一种被广泛应用的开...</p>
  233. </div>
  234.     </a></li>
  235.     <li><a href="#">
  236. <h3>【学习 PHP】</h3>
  237. <div class="tp">
  238.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  239.     <p>PHP一种被广泛应用的开...</p>
  240. </div>
  241.     </a></li>
  242.     <li><a href="#">
  243. <h3>【学习 PHP】</h3>
  244. <div class="tp">
  245.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  246.     <p>PHP一种被广泛应用的开...</p>
  247. </div>
  248.     </a></li>
  249.     <li><a href="#">
  250. <h3>【学习 PHP】</h3>
  251. <div class="tp">
  252.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  253.     <p>PHP一种被广泛应用的开...</p>
  254. </div>
  255.     </a></li>
  256.     <li><a href="#">
  257. <h3>【学习 PHP】</h3>
  258. <div class="tp">
  259.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  260.     <p>PHP一种被广泛应用的开...</p>
  261. </div>
  262.     </a></li>
  263.     <li><a href="#">
  264. <h3>【学习 PHP】</h3>
  265. <div class="tp">
  266.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  267.     <p>PHP一种被广泛应用的开...</p>
  268. </div>
  269.     </a></li>
  270.     <li><a href="#">
  271. <h3>【学习 PHP】</h3>
  272. <div class="tp">
  273.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  274.     <p>PHP一种被广泛应用的开...</p>
  275. </div>
  276.     </a></li>
  277.     <li><a href="#">
  278. <h3>【学习 PHP】</h3>
  279. <div class="tp">
  280.     <img src="https://img.php.cn/upload/system/000/000/068/6246e493d0c87292.png" alt="">
  281.     <p>PHP一种被广泛应用的开...</p>
  282. </div>
  283.     </a></li>
  285. </ul>
  287. <div class="lm" data-t="3">
  288.     <a href="#">php array_diff_assoc()函数</a>
  289.     <a href="#">php array_merge_recursive()函数</a>
  290.     <a href="#">TCP/IP 邮件</a>
  291.     <a href="#">TCP/IP 协议</a>
  292.     <a href="#">TCP/IP 寻址</a>
  293.     <a href="#">Web Forms - 数据库连接</a>
  294.     <a href="#">Web Forms - ArrayList 对象</a>
  295.     <a href="#">Web Forms - Button 控件</a>
  296.     <a href="#">Web Forms - TextBox 控件</a>
  297.     <a href="#">Web Forms - HTML 表单</a>
  298.     <a href="#">Web Forms - 事件</a>
  299.     <a href="#">ionic Toggle(切换开关)</a>
  300.     <a href="#">ionic 表单和输入框</a>
  301. </div>
  302.     </div>
  303.     <script>
  304. let a=document.querySelector('.top')
  305. let li=document.querySelectorAll('.top li')
  306. let arr=[document.querySelector('ul.xxk'),document.querySelector('.box .bottom'),document.querySelector('.lm')]
  307. a.addEventListener('click',function(){
  308.  if(event.target.tagName==='A'){
  309.   li.forEach(i=>i.classList.remove('active'))
  310.   event.target.classList.add('active')
  311.   event.target.parentNode.classList.add('active')
  312. arr.find(i=>{
  313.     i.classList.remove('active')
  314. if(event.target.parentNode.dataset.t===i.dataset.t){
  315.  i.classList.add('active')
  316. }})}})
  317.     </script>
  318. </body>
  319. </html>

3.数组api

  1.   <script>
  2.         // 1.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
  3.         let arr=[1,2,3]
  4.         let b=[3,4,5]
  5.         console.log(arr.concat(b));
  7.         // 2.lastIndexOf()方法从数组的末尾开始向前查找满足条件的索引
  8.         console.log(arr.lastIndexOf(3));
  10.         // 3.toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
  11.         console.log(arr.toString());
  13.         // 4.reverse()反向排序
  14.         console.log(arr.reverse());
  16.         // 5.includes() 方法返回一个布尔值，表示某个数组是否包含给定的值
  17.         console.log(arr.includes(5));
  18.     </script>
上一条：类数组与纯数组，dom遍历与常用的API下一条：JS数据类型和遍历循环
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多