search

博客列表 >项目实践：Todolist留言与删除、轮播图

项目实践：Todolist留言与删除、轮播图

，多思曩惜，
，多思曩惜，原创
2020年06月04日 18:42:111017浏览

学习总结

  • 点击事件方法keyup()、keydown()、keypress()等
  • 了解懒加载的部分知识
  • 轮播图难度大，代码量也多，知识面也广，需要反复练习

评论

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.    评论：<input type="text"/>
  10.    <ol></ol>
  11. </body>
  12. </html>
  13. <script>
  14.         var cl=console.log.bind(console);
  15.         // 获取input元素
  16.         var input = document.querySelector("input");
  17.         // 获取ol元素
  18.         var ol = document.querySelector("ol");
  19.         // input事件监听
  20.         // keyDown:按下
  21.         // keyup：抬起、释放
  22.         // keypress：获取单个字母，功能键无效
  23.         input.addEventListener(
  24.             "keyup",
  25.             function(ev){
  26.             // cl(ev.key);
  27.             // cl(ev.keyCode)
  28.             if(ev.key==="Enter"){
  29.                 // 检测内容是否为空和是否存在输入空格
  30.                 if(input.value.length === 0 || input.value.indexOf(" ") >=0   ) { alert("内容不能为空");false;}
  31.                 else {
  32.                     // 创建元素、
  33.                     var li = document.createElement('li');
  34.                     // 填充内容
  35.                     li.innerHTML = input.value + "<button onclick='del(this)'>删除</button>";
  36.                     // 添加到页面中，挂载到父节点下面
  37.                     ol.appendChild(li);
  38.                     // 将最新留言始终放在第一位
  39.                     if(ol.childElementCount===0) ol.appendChild(li);
  40.                     // insertBefore(插入节点，插入位置)
  41.                     else ol.insertBefore(li,ol.firstElementChild);
  42.                     // 清空内容框
  43.                     input.value=null;
  44.                 }
  45.             }
  46.         },
  47.         false
  48.         );
  49.         // 评论删除
  50.         function del(ele){
  51.             // cl(ele.parentNode);
  52.             // cl(ele.parentNode.parentNode);
  53.             return confirm("是否删除")
  54.             // ele.parentNode.parentNode  父节点
  55.             // ele.parentNode 删除节点
  56.             ? ele.parentNode.parentNode.removeChild(ele.parentNode)
  57.             :false;
  58.         }
  59. </script>


选项卡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选项卡</title>
  7.     <style>
  8.         * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       a {
  13.         text-decoration: none;
  14.         color: #555;
  15.       }
  16.       a:hover {
  17.         text-decoration: underline;
  18.         color: red;
  19.       }
  20.       li {
  21.         list-style: none;
  22.       }
  23.       li:hover {
  24.         cursor: default;
  25.       }
  26.       .tabs {
  27.         width: 300px;
  28.         height: 300px;
  29.         margin: 30px;
  30.         background-color: #ddd;
  32.         display: flex;
  33.         flex-direction: column;
  34.       }
  36.       .tab {
  37.         height: 36px;
  38.         display: flex;
  39.       }
  40.       .tab li {
  41.         flex: auto;
  42.         text-align: center;
  43.         line-height: 36px;
  44.         background-color: #fff;
  45.       }
  46.       .tab li.active {
  47.         background-color: #ddd;
  48.       }
  50.       /* 默认所有选项卡只有一个显示,其它隐藏 */
  51.       .item {
  52.         padding: 20px;
  53.         display: none;
  54.       }
  55.       .item.active {
  56.         display: block;
  57.       }
  58.     </style>
  59. </head>
  60. <body>
  61.     <div class="tabs">
  62.         <!-- 导航 -->
  63.         <ul class="tab">
  64.             <li class="active" data-index="1">书本</li>
  65.             <li data-index="2">宠物</li>
  66.             <li data-index="3">人</li>
  67.         </ul>  
  68.         <!-- 详情1 -->
  69.         <ul class="item active" data-index="1">
  70.             <li><a href="">PHP</a></li>
  71.             <li><a href="">HTML</a></li>
  72.             <li><a href="">JS</a></li>
  73.         </ul>
  74.         <!-- 详情2 -->
  75.         <ul class="item" data-index="2">
  76.             <li><a href="">狗</a></li>
  77.             <li><a href="">猫</a></li>
  78.             <li><a href="">老鼠</a></li>
  79.         </ul>
  80.         <!-- 详情2 -->
  81.         <ul class="item" data-index="3">
  82.             <li><a href="">男人</a></li>
  83.             <li><a href="">女人</a></li>
  84.             <li><a href="">变性人</a></li>
  85.         </ul>
  86.     </div>
  87.     <script>
  88.         var cl=console.log.bind(console);
  89.         // 获取导航
  90.         var tab = document.querySelector(".tab");
  91.         // 获取详情
  92.         var items= document.querySelectorAll(".item");
  93.         // 绑定点击事件
  94.         tab.addEventListener("click",show,false);
  95.         // 绑定鼠标移动事件
  96.         tab.addEventListener("mouseover",show,false);
  97.         // 事件回调函数
  98.         function show(ev){
  99.             // 事件触发返回目标
  100.             // cl(ev.target);
  101.             // 拿data-index属性
  102.             // cl(ev.target.dataset.index);
  103.             // 清空导航原有的激活
  104.             ev.target.parentNode.childNodes.forEach(function(item){
  105.                 // 过滤
  106.                 if(item.nodeType ===1) item.classList.remove("active");
  107.             });
  108.             // 点击导航激活
  109.             ev.target.classList.toggle("active");
  110.             // 清空原有列表
  111.             items.forEach(function(item){
  112.                 item.classList.remove("active");
  113.             });
  114.             // data-index列表与data-index导航激活一致
  115.             items.forEach(function(item){
  116.                 if(item.dataset.index ===ev.target.dataset.index)
  117.                 item.classList.add("active");
  118.             });
  119.         }
  120.     </script>
  121. </body>
  122. </html>


懒加载/延迟加载背景知识

  1. cl("元素高度：",child.offsetHeight,"px");
  2. cl("元素宽度：",child.offsetWidth,"px");
  3. cl("距离父元素左边的偏移量",child.offsetLeft,"px");
  4. cl("距离父元素顶部的偏移量",child.offsetTop,"px");
  5. cl("父元素：",child.offsetParent,"px");
  6. cl("元素内容区大小：",child.clientHeight,"px");
  7. cl("元素内容大小：",child.clientWidth,"px");
  8. cl("文档大小:",document.documentElement.clientHeight,"px");
  9. cl("元素的滚动高度：",child.scrollHeight,"px");

轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>经典轮播图</title>
  6.     <style>
  7.       ul,
  8.       li {
  9.         margin: 0;
  10.         padding: 0;
  11.         list-style: none;
  12.       }
  13.       .box {
  14.         /*定位父级*/
  15.         position: relative;
  16.         width: 1000px;
  17.         height: 350px;
  18.         margin: 0 auto;
  19.       }
  20.       .box .slider {
  21.         width: 1000px;
  22.         height: 350px;
  23.         display: none;
  24.       }
  25.       .box .slider.active {
  26.         display: block;
  27.       }
  28.       .box .point-list {
  29.         position: absolute;
  30.         /*绝对定位的环境下的水平居中方式*/
  31.         left: 50%;
  32.         margin-left: -38px;
  33.         top: 310px;
  34.       }
  35.       .box .point-list .point {
  36.         display: inline-block;
  37.         width: 12px;
  38.         height: 12px;
  39.         margin: 0 5px;
  40.         background-color: white;
  41.         border-radius: 100%;
  42.       }
  43.      .box .point-list .point.active {
  44.         background-color: black;
  45.       }
  46.       .box .point-list .point:hover {
  47.         cursor: pointer;
  48.       }
  49.       .skip {
  50.         position: absolute;
  51.         top: 140px;
  52.         display: inline-block;
  53.         width: 40px;
  54.         height: 80px;
  55.         text-align: center;
  56.         line-height: 80px;
  57.         background-color: lightgray;
  58.         color: white;
  59.         opacity: 0.2;
  60.         font-size: 36px;
  61.       }
  62.       .box .prev {
  63.         left: 0;
  64.       }
  65.       .box .next {
  66.         right: 0;
  67.       }
  68.       .box .skip:hover {
  69.         cursor: pointer;
  70.         opacity: 0.5;
  71.         color: black;
  72.       }
  73.     </style>
  74.   </head>
  76.   <body>
  77.     <div class="box">
  78.       <img
  79.         src="banner/banner1.jpg"
  80.         alt=""
  81.         data-index="1"
  82.         class="slider active"
  83.       />
  84.       <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
  85.       <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
  86.       <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
  88.       <div class="point-list">
  89.         <!-- <span class="point active" data-index="1"></span>
  90.         <span class="point" data-index="2"></span>
  91.         <span class="point" data-index="3"></span> -->
  92.       </div>
  94.       <span class="skip prev">&lt;</span>
  95.       <span class="skip next">&gt;</span>
  96.     </div>
  97.   </body>
  98. </html>
  99. <script>
  100.     var cl =console.log.bind(console);
  101.     // 轮播图图片
  102.     var imgs = document.querySelectorAll("img");
  103.     var pointList = document.querySelector('.point-list');
  104.     // 生成小圆点
  105.     imgs.forEach(function(img,index){
  106.         var span =document.createElement('span');
  107.         // 小圆点激活
  108.         if(index == 0) span.classList.add('point','active');
  109.         span.classList.add('point');
  110.         // 小圆点与图片索引进行绑定
  111.         span.dataset.index = img.dataset.index;
  112.         pointList.appendChild(span);
  113.     });
  114.     // 获取所有小圆点
  115.     var points =document.querySelectorAll('.point');
  116.     // 小圆点点击事件
  117.     pointList.addEventListener('click',function(ev){
  118.       // 用图片让对应图片激活
  119.         imgs.forEach(function(img){
  120.             if(img.dataset.index === ev.target.dataset.index){
  121.                 imgs.forEach(function(img){
  122.                     img.classList.remove('active');
  123.                 });
  124.                     img.classList.add("active");
  125.                     // 圆点当前的高亮, 必须与图片一一对应, 同步
  126.                     setPointActive(img.dataset.index);
  127.             }
  128.         })
  129.     },false);
  130.     // 获取全部的翻页按钮
  131.     var skip = document.querySelectorAll(".skip");
  132.     skip.item(0).addEventListener('click', skipImg,false);
  133.     skip.item(1).addEventListener("click", skipImg,false);
  134.     // 翻页事件回调
  135.     function skipImg(ev) {
  136.         var currentImg = null;
  137.         imgs.forEach(function (img) {
  138.             // contains判断是否存在属性
  139.             if (img.classList.contains("active")) currentImg = img;
  140.         });
  141.         // 判断是否点击前一页
  142.         if(ev.target.classList.contains("prev")){
  143.             // 当前显示属性移除
  144.             currentImg.classList.remove("active");
  145.             currentImg = currentImg.previousElementSibling;
  146.             // 判断前一页是否存在
  147.             if(currentImg !== null && currentImg.nodeName==='IMG')
  148.             currentImg.classList.add("active");
  149.             else{
  150.                 // 不存在进行循环显示
  151.                 currentImg = imgs[imgs.length-1];
  152.                 currentImg.classList.add("active");
  153.             }
  154.         }
  155.         // 判断是否点击下一页
  156.         if(ev.target.classList.contains("next")){
  157.             currentImg.classList.remove("active");
  158.             currentImg = currentImg.nextElementSibling;
  159.             if(currentImg !== null && currentImg.nodeName==='IMG')
  160.             currentImg.classList.add("active");
  161.             else{
  162.                 currentImg = imgs[0];
  163.                 currentImg.classList.add("active");
  164.             }
  165.         }
  166.         // 调用函数：设置小圆点的高亮
  167.         setPointActive(currentImg.dataset.index);
  168.     }
  169.     var box=document.querySelector('.box');
  170.     var timer =null;
  171.     box.addEventListener('mouseout',startTimer,false); 
  172.     box.addEventListener('mouseover',clearTimer,false);
  173.     function startTimer(){
  174.         var click = new Event('click');
  175.         setInterval(function(){
  176.             skip.item(1).dispatchEvent(click);
  177.         },4000);
  178.     }
  179.     function clearTimer(){
  180.         clearInterval(timer);
  181.     }
  183.     // 公共函数:setPointActive
  184.     function setPointActive(imgIndex){
  185.         points.forEach(function(point){
  186.            // 清除原来的所有的小圆点上的高亮
  187.             point.classList.remove("active");
  188.         });
  189.         points.forEach(function(point){
  190.             if(point.dataset.index === imgIndex) point.classList.add("active");
  191.         })
  192.     }
  193. </script>

上一条：小程序授权逻辑下一条：laravel框架的基本用法，新建控制器，新建路由，渲染视图，数据库的增删改查
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多