js 实现 hasClass(), addClass(), removeClass() 方法

可以通过以下方式实现：

function hasClass(elem, className) {
  if (!elem || !className) return false;
  return elem.classList.contains(className);
}

function addClass(elem, className) {
  if (!elem || !className) return;
  elem.classList.add(className);
}

function removeClass(elem, className) {
  if (!elem || !className) return;
  elem.classList.remove(className);
}

其中，`hasClass` 方法用于判断元素是否含有某个类名，`addClass` 方法用于为元素添加类名，`removeClass` 方法用于移除元素的类名。这些方法都需要传入两个参数，第一个参数为要操作的元素，第二个参数为类名。如果元素或类名为空，则不进行任何操作。这些方法都是基于 `classList` 属性实现的。

相关问题

JS实现顺时针抽奖九宫格

好的，下面是一个简单的JS实现顺时针抽奖九宫格的示例代码：

HTML部分：

<div id="lottery">
  <ul>
    <li><img src="img/1.png"></li>
    <li><img src="img/2.png"></li>
    <li><img src="img/3.png"></li>
    <li><img src="img/4.png"></li>
    <li><img src="img/5.png"></li>
    <li><img src="img/6.png"></li>
    <li><img src="img/7.png"></li>
    <li><img src="img/8.png"></li>
    <li><img src="img/9.png"></li>
  </ul>
  <div id="btn">开始抽奖</div>
</div>

CSS部分：

#lottery {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#lottery ul {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  transform: rotate(0deg);
  transform-origin: center center;
}

#lottery ul li {
  width: 100px;
  height: 100px;
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
}

#lottery ul li img {
  width: 80px;
  height: 80px;
  margin-top: 10px;
}

#btn {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #f00;
  color: #fff;
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin-left: -50px;
  cursor: pointer;
  border-radius: 5px;
}

JS部分：

var lottery = {
  index: -1, // 当前转动到哪个位置，起点位置
  count: 0, // 总共有多少个位置
  timer: null, // 定时器
  speed: 20, // 初始转动速度
  times: 0, // 转动次数
  cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
  prize: -1, // 中奖位置
  init: function(id) {
    if ($("#" + id).find(".lottery-unit").length > 0) {
      $lottery = $("#" + id);
      $units = $lottery.find(".lottery-unit");
      this.obj = $lottery;
      this.count = $units.length;
      $lottery.find(".lottery-unit-" + this.index).addClass("active");
    }
  },
  roll: function() {
    var index = this.index;
    var count = this.count;
    var lottery = this.obj;
    $(lottery).find(".lottery-unit-" + index).removeClass("active");
    index += 1;
    if (index > count - 1) {
      index = 0;
    }
    $(lottery).find(".lottery-unit-" + index).addClass("active");
    this.index = index;
    return false;
  },
  stop: function(index) {
    this.prize = index;
    return false;
  }
};

function roll() {
  lottery.times += 1;
  lottery.roll();
  if (lottery.times > lottery.cycle + 10 && lottery.index == lottery.prize) {
    clearTimeout(lottery.timer);
    lottery.prize = -1;
    lottery.times = 0;
    $("#btn").removeClass("disabled");
  } else {
    if (lottery.times < lottery.cycle) {
      lottery.speed -= 10;
    } else if (lottery.times == lottery.cycle) {
      var index = Math.random() * (lottery.count) | 0;
      lottery.prize = index;
    } else {
      if (
        lottery.times >
        lottery.cycle + 10 &&
        ((lottery.prize == 0 && lottery.index == lottery.count - 1) ||
          lottery.prize == lottery.index + 1)
      ) {
        lottery.speed += 110;
      } else {
        lottery.speed += 20;
      }
    }
    if (lottery.speed < 40) {
      lottery.speed = 40;
    }
    lottery.timer = setTimeout(roll, lottery.speed);
  }
  return false;
}

$(function() {
  lottery.init("lottery");
  $("#btn").click(function() {
    if ($("#btn").hasClass("disabled")) {
      return false;
    } else {
      $("#btn").addClass("disabled");
      lottery.speed = 100;
      roll();
      return false;
    }
  });
});

这里使用了一个对象`lottery`，包含了初始化、滚动、停止等方法，同时在HTML中加入了一个抽奖的按钮。在点击按钮时，会触发抽奖动画，然后随机选中一个奖项并停止。

import $, { css, append, prepend, addClass, removeClass, hasClass, on, off, focus, attr, hide, show, parents, dataset, val, text, removeAttr, children, html, remove, find, width, height, Dom7Array, filter, empty, } from 'dom7' export { Dom7Array } from 'dom7'这段代码报错SyntaxError: The requested module '/node_modules/.vite/deps/dom7.js?v=8570020b' does not provide an export named 'Dom7Array'

根据你提供的代码，报错信息显示请求的模块 '/node_modules/.vite/deps/dom7.js?v=8570020b' 并没有提供名为 'Dom7Array' 的导出。这可能是由于 dom7.js 文件中没有导出 'Dom7Array' 或者该导出被重命名了。

你可以检查 dom7.js 文件，确保它导出了 'Dom7Array'。另外，还可以查看导出的名称是否与你的导入语句中的名称匹配，确保没有重命名导出。

如果你确认 dom7.js 文件中确实没有导出 'Dom7Array'，那么你可能需要查找其他的方式来获取所需的功能或者寻找其他可用的库。