search

博客列表 >JS 实战案例-留言评论功能和轮播图

JS 实战案例-留言评论功能和轮播图

我是郭富城
我是郭富城原创
2020年06月07日 12:26:20907浏览

JS 实战案例-留言评论功能和轮播图

1.留言评论功能

演示地址：http://www.php520.vip/0526/toDolist.html

  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>toDoList</title>
  7.     <link rel="stylesheet" href="layui/css/layui.css" />
  8.     <script src="layui/layui.js"></script>
  9.   </head>
  10.   <body>
  11.     <hr class="layui-bg-orange" />
  12.     <label class="layui-form-label">留言内容：</label>
  13.     <div class="layui-input-inline">
  14.       <input
  15.         type="text"
  16.         name="title"
  17.         required
  18.         lay-verify="required"
  19.         placeholder="请输入留言内容"
  20.         autocomplete="off"
  21.         class="layui-input"
  22.       />
  23.     </div>
  25.     <div class="layui-card">
  26.       <div class="layui-card-header">留言记录</div>
  27.       <div class="layui-card-body">
  28.         <ol></ol>
  29.       </div>
  30.     </div>
  31.   </body>
  32. </html>
  33. <script>
  34.   layui.use("layer", function () {
  35.     var layer = layui.layer;
  36.   });
  37.   var cl = console.log.bind(console);
  39.   var input = document.querySelector("input");
  40.   var ol = document.querySelector("ol");
  42.   //   keyDown: 按下
  43.   //   keyup: 抬起/释放
  44.   //   keypress: 获取单个字母,功能键无效
  45.   input.addEventListener(
  46.     "keyup",
  47.     function (ev) {
  48.       //   cl(ev.key);
  49.       //   cl(ev.keyCode);
  50.       if (ev.key === "Enter") {
  51.         // 检查内容是否为空
  52.         if (input.value.length === 0) layer.msg("内容不能为空");
  53.         // 创建元素
  54.         var li = document.createElement("li");
  55.         // 填充内容
  56.         li.innerHTML =
  57.           input.value +
  58.           '<button onclick="del(this)" class="layui-btn layui-btn-xs"">删除</button>';
  59.         // 添加到页面中,挂载到父节点下面
  61.         // 将最新留言始终显示在第一个
  62.         if (ol.childElementCount === 0) ol.appendChild(li);
  63.         else ol.insertBefore(li, ol.firstElementChild);
  65.         // 清空留言区
  66.         input.value = null;
  67.       }
  68.     },
  69.     false
  70.   );
  72.   // 删除评论的函数
  73.   function del(ele) {
  74.     // cl(ele.parentNode);
  75.     // cl(ele.parentNode.parentNode);
  76.     return layer.confirm("是否删除?")
  77.       ? ele.parentNode.parentNode.removeChild(ele.parentNode)
  78.       : false;
  79.   }
  80. </script>

2.轮播图

演示地址http://www.php520.vip/0526/banner.html

2.1 html

  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.     <link rel="stylesheet" href="css/banner.css" />
  8.   </head>
  9.   <body>
  10.     <div class="banner">
  11.       <ul>
  12.         <li><img src="banner/banner1.jpg" alt="#" /></li>
  13.         <li><img src="banner/banner2.jpg" alt="#" /></li>
  14.         <li><img src="banner/banner3.jpg" alt="#" /></li>
  15.         <li><img src="banner/banner4.jpg" alt="#" /></li>
  16.       </ul>
  17.       <ol></ol>
  18.       <div class="dirBtn">
  19.         <a name="left" href="JavaScript:;"
  20.           ><span name="left" class="skip prev">&lt;</span></a
  21.         >
  22.         <a name="right" href="JavaScript:;"
  23.           ><span name="right" class="skip next">&gt;</span></a
  24.         >
  25.       </div>
  26.     </div>
  27.   </body>
  28. </html>

2.2 css

  1. body,
  2. div,
  3. ul,
  4. li,
  5. ol,
  6. a {
  7.   margin: 0;
  8.   padding: 0;
  9.   list-style: none;
  10.   text-decoration: none;
  11.   font-size: 0;
  12. }
  13. img {
  14.   display: block;
  15.   width: 100%;
  16.   height: 100%;
  17. }
  18. .banner {
  19.   width: 480px;
  20.   height: 270px;
  21.   position: relative;
  22.   margin: 200px auto;
  23.   border: solid 5px #7d777b;
  24.   overflow: hidden;
  25. }
  26. .banner ul {
  27.   width: 500%;
  28.   height: 100%;
  29.   overflow: hidden;
  30.   position: absolute;
  31.   left: 0;
  32.   top: 0;
  33.   z-index: 0;
  34. }
  35. .banner ul li {
  36.   float: left;
  37.   width: 480px;
  38.   height: 100%;
  39. }
  40. .banner ol {
  41.   width: 100%;
  42.   height: 40px;
  43.   position: absolute;
  44.   left: 0;
  45.   bottom: 0;
  46.   z-index: 2;
  47.   display: flex;
  48.   justify-content: center;
  49.   align-items: center;
  50. }
  51. .banner ol li {
  52.   width: 20px;
  53.   height: 20px;
  54.   border: solid 2px #fff;
  55.   border-radius: 50%;
  56.   cursor: pointer;
  57.   margin: 0 10px;
  58. }
  59. .banner ol li.active {
  60.   background-color: #e0a8d7;
  61. }
  62. /* 上一页下一页样式 */
  64. .dirBtn .skip {
  65.   position: absolute;
  66.   top: 100px;
  67.   display: inline-block;
  68.   width: 40px;
  69.   height: 80px;
  70.   text-align: center;
  71.   line-height: 80px;
  72.   background-color: lightgray;
  73.   color: white;
  74.   opacity: 0.2;
  75.   font-size: 36px;
  76. }
  78. .dirBtn .prev {
  79.   left: 0;
  80. }
  82. .dirBtn .next {
  83.   right: 0;
  84. }
  86. .dirBtn .skip:hover {
  87.   cursor: pointer;
  88.   opacity: 0.5;
  89.   color: black;
  90. }

2.3 JS

  1. // 获取标签对象
  2. var oDiv = document.querySelector(".banner");
  3. var oUl = document.querySelector("ul");
  4. var ouLis = document.querySelectorAll("ul li");
  5. var oOl = document.querySelector("ol");
  7. var oDir = document.querySelector(".dirBtn");
  8. // 获取li的默认宽度
  9. var liWidth = parseInt(window.getComputedStyle(ouLis[0]).width);
  10. // 定义开关变量,防止点击过快
  11. // 在js函数中会有防止点击过快的程序
  12. var bool = true;
  13. // 存储轮播图执行次数的变量
  14. var oriVal = 1;
  15. // 存储自动轮播定时器变量
  16. var timer = 0;
  18. setLi();
  19. copyLi();
  20. autoplay();
  21. stopPlay();
  22. focusBtn();
  23. dirBtn();
  24. hidden();
  1. // 首先，设置运动函数，来实现各标签的动画效果
  2. // 参数1,标签对象
  3. // 参数2,运动属性
  4. // 参数3,运动终止函数
  5. function move(ele, obj, callback) {
  6.   for (let type in obj) {
  7.     // 获取原始定位数据
  8.     let oriVal = parseInt(window.getComputedStyle(ele)[type]);
  9.     // 定义定时器
  10.     let timer = setInterval(function () {
  11.       // 计算步长并取整，保证计时器能停下来
  12.       let speed = (obj[type] - oriVal) / 5;
  13.       if (speed > 0) {
  14.         speed = Math.ceil(speed);
  15.       } else {
  16.         speed = Math.floor(speed);
  17.       }
  18.       oriVal += speed;
  19.       // 执行定位
  20.       ele.style[type] = oriVal + "px";
  21.       // 到达目标位置,终止定时器
  22.       if (oriVal === obj[type]) {
  23.         clearInterval(timer);
  24.         callback();
  25.       }
  26.     }, 100);
  27.   }
  28. }
  30. // 根据ul中原始标签的数量动态生成ol中的li标签
  31. // 也就是轮播图中的焦点按钮
  32. function setLi() {
  33.   let str = "";
  34.   ouLis.forEach(function (item, key) {
  35.     if (key === 0) {
  36.       str += `<li index="${key + 1}" class="active"></li>`;
  37.     } else {
  38.       str += `<li index="${key + 1}"></li>`;
  39.     }
  40.   });
  41.   oOl.innerHTML = str;
  42. }
  44. // 复制原始第一张轮播图到ul的最后
  45. // 复制原始最后一张轮播图到ul的起始
  46. // 并重新定义ul的宽度，将ul定位到原始5张图的第一张图的位置
  47. function copyLi() {
  48.   let liF = ouLis[0];
  49.   let liL = ouLis[ouLis.length - 1];
  51.   let first = liF.cloneNode(true);
  52.   let last = liL.cloneNode(true);
  54.   oUl.appendChild(first);
  55.   oUl.insertBefore(last, liF);
  57.   oUl.style.width = (ouLis.length + 2) * liWidth + "px";
  58.   oUl.style.left = -liWidth + "px";
  59. }
  61. // 自动轮序播放图片函数
  62. function autoplay() {
  63.   timer = setInterval(function () {
  64.     oriVal++;
  65.     move(oUl, { left: -oriVal * liWidth }, moveEnd);
  66.   }, 3000);
  67. }
  69. // 运动函数结束时执行的函数
  70. // 就是move函数中的callback
  71. function moveEnd() {
  72.   // 给开关变量,赋值初始值
  73.   bool = true;
  74.   // 判断oriVal数值,并且给ul做定位
  75.   // 如果是最后一个图片
  76.   if (oriVal === ouLis.length + 1) {
  77.     // 改变oriVal数值
  78.     oriVal = 1;
  79.     // 瞬间切换图片
  80.     oUl.style.left = -oriVal * liWidth + "px";
  81.   }
  82.   // 如果是第一个图片
  83.   else if (oriVal === 0) {
  84.     // 改变oriVal数值
  85.     oriVal = ouLis.length;
  86.     // 瞬间切换图片
  87.     oUl.style.left = -oriVal * liWidth + "px";
  88.   }
  89.   // 设定焦点按钮样式
  90.   // 获取ol中的li,在生成焦点之后生成
  91.   let ooLis = document.querySelectorAll("ol li");
  92.   ooLis.forEach(function (item) {
  93.     item.className = "";
  94.     if (item.getAttribute("index") - 0 === oriVal) {
  95.       item.className = "active";
  96.     }
  97.   });
  98. }
  100. // 鼠标移入移出事件
  101. // 移入终止轮播
  102. // 移出继续轮播
  103. function stopPlay() {
  104.   // 给父级div添加事件
  106.   // 移入清除定时器,终止函数
  107.   oDiv.addEventListener("mouseover", function () {
  108.     clearInterval(timer);
  109.   });
  110.   // 移出,再次执行函数
  111.   oDiv.addEventListener("mouseout", function () {
  112.     autoplay();
  113.   });
  114. }
  116. // 焦点按钮切换
  117. function focusBtn() {
  118.   // 给ol添加事件
  119.   oOl.addEventListener("click", function (e) {
  120.     // 兼容性处理
  121.     e = e || event;
  122.     let eTarget = e.target || e.srcElement;
  123.     // 如果点击的是li标签
  124.     if (eTarget.tagName === "LI") {
  125.       // 防止点击过快处理
  126.       if (bool !== true) {
  127.         return;
  128.       }
  129.       bool = false;
  130.       // 获取点击标签,index的属性,赋值给变量
  131.       oriVal = eTarget.getAttribute("index") - 0;
  132.       // 一定要用move()运动函数,这样才可以再次点击
  133.       move(oUl, { left: -oriVal * liWidth }, moveEnd);
  134.     }
  135.   });
  136. }
  138. // 左右方向的焦点切换
  139. // 点左,上一张
  140. // 点右,下一张
  141. function dirBtn() {
  142.   oDir.addEventListener("click", function (e) {
  143.     // 兼容性处理
  144.     e = e || event;
  145.     let eTarget = e.target || e.srcElement;
  146.     // 如果点击的是左切换
  147.     if (eTarget.getAttribute("name") === "left") {
  148.       if (bool !== true) {
  149.         return;
  150.       }
  151.       bool = false;
  152.       oriVal--;
  153.       move(oUl, { left: -oriVal * liWidth }, moveEnd);
  154.       console.log(eTarget.getAttribute("name"));
  155.     }
  156.     // 如果点击的是右切换
  157.     else if (eTarget.getAttribute("name") === "right") {
  158.       if (bool !== true) {
  159.         return;
  160.       }
  161.       bool = false;
  162.       oriVal++;
  163.       move(oUl, { left: -oriVal * liWidth }, moveEnd);
  164.       console.log(eTarget.getAttribute("name"));
  165.     }
  166.   });
  167. }
  169. // 页面隐藏函数
  170. // 比如切换页面时就停止轮播图，回到轮播图页面时继续执行轮播
  171. function hidden() {
  172.   document.addEventListener("visibilitychange", function () {
  173.     if (document.visibilityState === "hidden") {
  174.       clearInterval(timer);
  175.     } else if (document.visibilityState === "visible") {
  176.       autoplay();
  177.     }
  178.   });
  179. }

2.4 效果图

3.总结

万变不离其宗，js学到目前为止，发现其不过也就是和php差不多，知道语法以后，想要实现什么功能，逻辑想好了，通过DOM获取页面中的元素，利用函数实现相关的功能就好了，不懂就百度，越来越觉得php和js搭配可以做很多事情。

上一条：jquery中的Ajax相关事件函数、跨域请求和无刷新分页技术下一条：Laravel 模型 中间件 示例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多