search

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

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

赵大叔
赵大叔原创
2020年05月27日 16:38:56642浏览

留言与删除

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Todolist案例-留言与删除</title>
  6.     <style>
  7.         ul {display: flex; flex-direction: column;}
  8.         li button {margin-left: 10px;}
  9.     </style>
  10. </head>
  11. <body>
  13. 请留言:<input type="text" name="content">
  14. <ol></ol>
  16. </body>
  17. <script>
  18.     // 获取表单
  19.     var inpt = document.querySelector("input");
  20.     // 留言区
  21.     var ol = document.querySelector("ol");
  23.     inpt.addEventListener("keyup", function (ev) {
  24.         // console.log(ev.key);
  26.         if (ev.key === "Enter") {
  27.             // 1、检查内容是否为空
  28.             if(inpt.value.length === 0){
  29.                 alert("留言内容不能为空");
  30.             }else {
  31.                 // 1、创建元素
  32.                 var li = document.createElement("li");
  34.                 // 2、填充内容
  35.                 li.innerHTML = inpt.value + '<button onclick="del(this)">删除</button>';
  37.                 // ol.appendChild(li)：挂载内容到父节点下
  38.                 // 3、将最新留言始终显示在第一个：如果没有留言-->ol子元素数量为0
  39.                 if (ol.childElementCount === 0) ol.appendChild(li);
  40.                 // insertBefore：将某个节点添加到另一个节点前面
  41.                 else ol.insertBefore(li, ol.firstElementChild);
  43.                 // 4、清空留言区
  44.                 inpt.value = null;
  45.             }
  46.         }
  47.     },false);
  49.     // 删除评论的函数
  50.     function del(ele) {
  51.         return confirm('是否删除?') ? ol.removeChild(ele.parentElement) : false;
  52.     }
  53. </script>
  54. </html>

演示效果图：

轮播图

代码：

  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.         }
  14.         .box {
  15.             /*定位父级*/
  16.             position: relative;
  17.             width: 1000px;
  18.             height: 350px;
  19.             margin: 0 auto;
  20.         }
  22.         .box .slider {
  23.             width: 1000px;
  24.             height: 350px;
  25.             display: none;
  26.         }
  28.         .box .slider.active {
  29.             display: block;
  30.         }
  32.         .box .point-list {
  33.             position: absolute;
  34.             /*绝对定位的环境下的水平居中方式*/
  35.             left: 50%;
  36.             margin-left: -38px;
  37.             top: 310px;
  38.         }
  40.         .box .point-list .point {
  41.             display: inline-block;
  42.             width: 12px;
  43.             height: 12px;
  44.             margin: 0 5px;
  45.             background-color: white;
  46.             border-radius: 100%;
  47.         }
  49.         .box .point-list .point.active {
  50.             background-color: black;
  51.         }
  53.         .box .point-list .point:hover {
  54.             cursor: pointer;
  55.         }
  57.         .skip {
  58.             position: absolute;
  59.             top: 140px;
  60.             display: inline-block;
  61.             width: 40px;
  62.             height: 80px;
  63.             text-align: center;
  64.             line-height: 80px;
  65.             background-color: lightgray;
  66.             color: white;
  67.             opacity: 0.2;
  68.             font-size: 36px;
  69.         }
  71.         .box .prev {
  72.             left: 0;
  73.         }
  75.         .box .next {
  76.             right: 0;
  77.         }
  79.         .box .skip:hover {
  80.             cursor: pointer;
  81.             opacity: 0.5;
  82.             color: black;
  83.         }
  84.     </style>
  85. </head>
  86. <body>
  87. <div class="box">
  88.     <img src="banner/banner1.jpg" alt="" class="slider active" data-index="1">
  89.     <img src="banner/banner2.jpg" alt="" class="slider" data-index="2">
  90.     <img src="banner/banner3.jpg" alt="" class="slider" data-index="3">
  91.     <img src="banner/banner4.jpg" alt="" class="slider" data-index="4">
  93.     <!-- 小按钮 -->
  94.     <div class="point-list">
  95.     <!-- <span class="point active"></span>
  96.     <span class="point"></span>
  97.     <span class="point"></span> -->
  98.     </div>
  100.     <!-- 左页翻页按钮 -->
  101.     <span class="skip prev">&lt;</span>
  102.     <span class="skip next">&gt;</span>
  103. </div>
  105. </body>
  106. <script>
  107.     // 1、获取所有图片
  108.     var imgs = document.querySelectorAll('img');
  110.     // 2、获取小圆点的父节点
  111.     var pointList = document.querySelector('.point-list');
  113.     // 3、动态生成小圆点：圆点和图片对应，通过遍历图片动态生成
  114.     imgs.forEach(function (img, index) {
  115.         var span = document.createElement('span');
  116.         // 默认显示第一张图片,所以第一个小圆点应该是激活,就是有一个黑背景
  117.         if (index === 0) {
  118.             span.classList.add('point', 'active');
  119.         }
  120.         // 给圆点添加样式
  121.         span.classList.add('point');
  123.         // 将小圆点与当前的图片进行关联
  124.         span.dataset.index = img.dataset.index;
  125.         // 将小圆点添加到页面中
  126.         pointList.appendChild(span);
  127.     });
  129.     // 4、为小圆点添加点击事件
  130.     // 获取所有的小圆点
  131.     var points = document.querySelectorAll('.point');
  132.     // 事件代理/委托；为每个小圆点添加点击事件
  133.     pointList.addEventListener("click", function (ev) {
  134.             console.log(ev.target);
  135.             imgs.forEach(function (img) {
  136.                 if (img.dataset.index === ev.target.dataset.index) {
  137.                     imgs.forEach(function (img) {
  138.                         // 去掉原来图片激活样式
  139.                         img.classList.remove("active");
  140.                     });
  141.                     // 设置当前图片的激活样式
  142.                     img.classList.add("active");
  144.                     // 公共函数: 设置小圆点当前的高亮, 必须与图片一一对应, 同步
  145.                     setPointActive(img.dataset.index);
  146.                 }
  147.             });
  148.         }, false);
  150.     // 公共函数:setPointActive;设置小圆点高亮
  151.     function setPointActive(imgIndex) {
  152.         // 清除之前的小圆点的激活状态
  153.         points.forEach(function (point) {
  154.             // 先移除之前圆点激活状态
  155.             point.classList.remove('active');
  156.             // 如果圆点和图片对应，设置为激活
  157.             if (point.dataset.index === imgIndex) point.classList.add('active');
  158.         });
  159.     }
  161.     // 获取翻页按钮
  162.     var skip = document.querySelectorAll('.skip');
  164.     // 添加事件
  165.     skip.item(0).addEventListener('click', skipImg, false);
  166.     skip.item(1).addEventListener('click', skipImg, false);
  168.     // 翻页显示图片的函数
  169.     function skipImg(ev) {
  170.         // 获取当前正在显示的图片
  171.         var currentImg = null;
  172.         imgs.forEach(function (img) {
  173.             // 当前图片是否有'active'
  174.             if (img.classList.contains('active')) {
  175.                 currentImg = img;
  176.             }
  177.         });
  179.         // 1. 判断点击的是显示前一张的按钮,显示前一张图片
  180.         if (ev.target.classList.contains('prev')) {
  181.             // 去掉当前图片的激活状态
  182.             currentImg.classList.remove('active');
  183.             // 获取前一张图片
  184.             currentImg = currentImg.previousElementSibling;
  186.             // 如果存在前一张
  187.             if (currentImg !== null && currentImg.nodeName === 'IMG') {
  188.                 currentImg.classList.add('active');
  189.             } else {
  190.                 // 如果不存在前一张
  191.                 currentImg = imgs[imgs.length - 1];
  192.                 currentImg.classList.add('active');
  193.             }
  194.         }
  196.         // 2. 判断点击的是显示前后张的按钮,显示后一张图片
  197.         if (ev.target.classList.contains('next')) {
  198.             // 去掉当前图片的激活状态
  199.             currentImg.classList.remove('active');
  200.             // 获取后一张图片
  201.             currentImg = currentImg.nextElementSibling;
  203.             // 如果存在后一张
  204.             if (currentImg !== null && currentImg.nodeName === 'IMG') {
  205.                 currentImg.classList.add('active');
  206.             } else {
  207.                 // 如果不存在前一张
  208.                 currentImg = imgs[0];
  209.                 currentImg.classList.add('active');
  210.             }
  211.         }
  212.         // 设置小圆点的高亮
  213.         setPointActive(currentImg.dataset.index);
  214.     }
  216.     // 定时器自动播放
  217.     var box = document.querySelector('.box');
  218.     var timer = null;
  220.     // 创建鼠标移入事件的监听器
  221.     box.addEventListener('mouseover', function(){
  222.         // 清除定时器
  223.         clearInterval(timer);
  224.     }, false);
  226.     // 移出时自动播放轮播图
  227.     box.addEventListener('mouseout', function (){
  228.         // 创建一个事件模拟器
  229.         var clickEvent = new Event('click');
  231.         timer = setInterval(function(){
  232.             skip.item(1).dispatchEvent(clickEvent);
  233.         }, 2000);
  235.     }, false);
  237. </script>
  238. </html>

演示效果图：

总结

1、轮播图很难，代码很多，变量、对象很多，涉及知识也很多。
2、总得来说还是写出来了。
3、轮播图案例需要、也值得反复练习。

上一条：前端 - JS - 将JSON字符串转换为JS对象和Ajax编程下一条：js学习：第18章 JS实战选项卡、懒加载、轮播图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多