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

1.留言评论功能

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>toDoList</title>
    <link rel="stylesheet" href="layui/css/layui.css" />
    <script src="layui/layui.js"></script>
  </head>
  <body>
    <hr class="layui-bg-orange" />
    <label class="layui-form-label">留言内容：</label>
    <div class="layui-input-inline">
      <input
        type="text"
        name="title"
        required
        lay-verify="required"
        placeholder="请输入留言内容"
        autocomplete="off"
        class="layui-input"
      />
    </div>
    <div class="layui-card">
      <div class="layui-card-header">留言记录</div>
      <div class="layui-card-body">
        <ol></ol>
      </div>
    </div>
  </body>
</html>
<script>
  layui.use("layer", function () {
    var layer = layui.layer;
  });
  var cl = console.log.bind(console);
  var input = document.querySelector("input");
  var ol = document.querySelector("ol");
  //   keyDown: 按下
  //   keyup: 抬起/释放
  //   keypress: 获取单个字母,功能键无效
  input.addEventListener(
    "keyup",
    function (ev) {
      //   cl(ev.key);
      //   cl(ev.keyCode);
      if (ev.key === "Enter") {
        // 检查内容是否为空
        if (input.value.length === 0) layer.msg("内容不能为空");
        // 创建元素
        var li = document.createElement("li");
        // 填充内容
        li.innerHTML =
          input.value +
          '<button onclick="del(this)" class="layui-btn layui-btn-xs"">删除</button>';
        // 添加到页面中,挂载到父节点下面
        // 将最新留言始终显示在第一个
        if (ol.childElementCount === 0) ol.appendChild(li);
        else ol.insertBefore(li, ol.firstElementChild);
        // 清空留言区
        input.value = null;
      }
    },
    false
  );
  // 删除评论的函数
  function del(ele) {
    // cl(ele.parentNode);
    // cl(ele.parentNode.parentNode);
    return layer.confirm("是否删除?")
      ? ele.parentNode.parentNode.removeChild(ele.parentNode)
      : false;
  }
</script>

2.轮播图

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

2.1 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="css/banner.css" />
  </head>
  <body>
    <div class="banner">
      <ul>
        <li><img src="banner/banner1.jpg" alt="#" /></li>
        <li><img src="banner/banner2.jpg" alt="#" /></li>
        <li><img src="banner/banner3.jpg" alt="#" /></li>
        <li><img src="banner/banner4.jpg" alt="#" /></li>
      </ul>
      <ol></ol>
      <div class="dirBtn">
        <a name="left" href="JavaScript:;"
          ><span name="left" class="skip prev">&lt;</span></a
        >
        <a name="right" href="JavaScript:;"
          ><span name="right" class="skip next">&gt;</span></a
        >
      </div>
    </div>
  </body>
</html>

2.2 css

body,
div,
ul,
li,
ol,
a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-size: 0;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.banner {
  width: 480px;
  height: 270px;
  position: relative;
  margin: 200px auto;
  border: solid 5px #7d777b;
  overflow: hidden;
}
.banner ul {
  width: 500%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.banner ul li {
  float: left;
  width: 480px;
  height: 100%;
}
.banner ol {
  width: 100%;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner ol li {
  width: 20px;
  height: 20px;
  border: solid 2px #fff;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 10px;
}
.banner ol li.active {
  background-color: #e0a8d7;
}
/* 上一页下一页样式 */
.dirBtn .skip {
  position: absolute;
  top: 100px;
  display: inline-block;
  width: 40px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  background-color: lightgray;
  color: white;
  opacity: 0.2;
  font-size: 36px;
}
.dirBtn .prev {
  left: 0;
}
.dirBtn .next {
  right: 0;
}
.dirBtn .skip:hover {
  cursor: pointer;
  opacity: 0.5;
  color: black;
}

2.3 JS

// 获取标签对象
var oDiv = document.querySelector(".banner");
var oUl = document.querySelector("ul");
var ouLis = document.querySelectorAll("ul li");
var oOl = document.querySelector("ol");
var oDir = document.querySelector(".dirBtn");
// 获取li的默认宽度
var liWidth = parseInt(window.getComputedStyle(ouLis[0]).width);
// 定义开关变量,防止点击过快
// 在js函数中会有防止点击过快的程序
var bool = true;
// 存储轮播图执行次数的变量
var oriVal = 1;
// 存储自动轮播定时器变量
var timer = 0;
setLi();
copyLi();
autoplay();
stopPlay();
focusBtn();
dirBtn();
hidden();

// 首先，设置运动函数，来实现各标签的动画效果
// 参数1,标签对象
// 参数2,运动属性
// 参数3,运动终止函数
function move(ele, obj, callback) {
  for (let type in obj) {
    // 获取原始定位数据
    let oriVal = parseInt(window.getComputedStyle(ele)[type]);
    // 定义定时器
    let timer = setInterval(function () {
      // 计算步长并取整，保证计时器能停下来
      let speed = (obj[type] - oriVal) / 5;
      if (speed > 0) {
        speed = Math.ceil(speed);
      } else {
        speed = Math.floor(speed);
      }
      oriVal += speed;
      // 执行定位
      ele.style[type] = oriVal + "px";
      // 到达目标位置,终止定时器
      if (oriVal === obj[type]) {
        clearInterval(timer);
        callback();
      }
    }, 100);
  }
}
// 根据ul中原始标签的数量动态生成ol中的li标签
// 也就是轮播图中的焦点按钮
function setLi() {
  let str = "";
  ouLis.forEach(function (item, key) {
    if (key === 0) {
      str += `<li index="${key + 1}" class="active"></li>`;
    } else {
      str += `<li index="${key + 1}"></li>`;
    }
  });
  oOl.innerHTML = str;
}
// 复制原始第一张轮播图到ul的最后
// 复制原始最后一张轮播图到ul的起始
// 并重新定义ul的宽度，将ul定位到原始5张图的第一张图的位置
function copyLi() {
  let liF = ouLis[0];
  let liL = ouLis[ouLis.length - 1];
  let first = liF.cloneNode(true);
  let last = liL.cloneNode(true);
  oUl.appendChild(first);
  oUl.insertBefore(last, liF);
  oUl.style.width = (ouLis.length + 2) * liWidth + "px";
  oUl.style.left = -liWidth + "px";
}
// 自动轮序播放图片函数
function autoplay() {
  timer = setInterval(function () {
    oriVal++;
    move(oUl, { left: -oriVal * liWidth }, moveEnd);
  }, 3000);
}
// 运动函数结束时执行的函数
// 就是move函数中的callback
function moveEnd() {
  // 给开关变量,赋值初始值
  bool = true;
  // 判断oriVal数值,并且给ul做定位
  // 如果是最后一个图片
  if (oriVal === ouLis.length + 1) {
    // 改变oriVal数值
    oriVal = 1;
    // 瞬间切换图片
    oUl.style.left = -oriVal * liWidth + "px";
  }
  // 如果是第一个图片
  else if (oriVal === 0) {
    // 改变oriVal数值
    oriVal = ouLis.length;
    // 瞬间切换图片
    oUl.style.left = -oriVal * liWidth + "px";
  }
  // 设定焦点按钮样式
  // 获取ol中的li,在生成焦点之后生成
  let ooLis = document.querySelectorAll("ol li");
  ooLis.forEach(function (item) {
    item.className = "";
    if (item.getAttribute("index") - 0 === oriVal) {
      item.className = "active";
    }
  });
}
// 鼠标移入移出事件
// 移入终止轮播
// 移出继续轮播
function stopPlay() {
  // 给父级div添加事件
  // 移入清除定时器,终止函数
  oDiv.addEventListener("mouseover", function () {
    clearInterval(timer);
  });
  // 移出,再次执行函数
  oDiv.addEventListener("mouseout", function () {
    autoplay();
  });
}
// 焦点按钮切换
function focusBtn() {
  // 给ol添加事件
  oOl.addEventListener("click", function (e) {
    // 兼容性处理
    e = e || event;
    let eTarget = e.target || e.srcElement;
    // 如果点击的是li标签
    if (eTarget.tagName === "LI") {
      // 防止点击过快处理
      if (bool !== true) {
        return;
      }
      bool = false;
      // 获取点击标签,index的属性,赋值给变量
      oriVal = eTarget.getAttribute("index") - 0;
      // 一定要用move()运动函数,这样才可以再次点击
      move(oUl, { left: -oriVal * liWidth }, moveEnd);
    }
  });
}
// 左右方向的焦点切换
// 点左,上一张
// 点右,下一张
function dirBtn() {
  oDir.addEventListener("click", function (e) {
    // 兼容性处理
    e = e || event;
    let eTarget = e.target || e.srcElement;
    // 如果点击的是左切换
    if (eTarget.getAttribute("name") === "left") {
      if (bool !== true) {
        return;
      }
      bool = false;
      oriVal--;
      move(oUl, { left: -oriVal * liWidth }, moveEnd);
      console.log(eTarget.getAttribute("name"));
    }
    // 如果点击的是右切换
    else if (eTarget.getAttribute("name") === "right") {
      if (bool !== true) {
        return;
      }
      bool = false;
      oriVal++;
      move(oUl, { left: -oriVal * liWidth }, moveEnd);
      console.log(eTarget.getAttribute("name"));
    }
  });
}
// 页面隐藏函数
// 比如切换页面时就停止轮播图，回到轮播图页面时继续执行轮播
function hidden() {
  document.addEventListener("visibilitychange", function () {
    if (document.visibilityState === "hidden") {
      clearInterval(timer);
    } else if (document.visibilityState === "visible") {
      autoplay();
    }
  });
}