jquery——九宫格大转盘抽奖实例

首先，我假设你已经对 jQuery 这个 JavaScript 库有了一定的了解，并知道如何在网站中引入它的代码。

环境搭建

在开始编写代码之前，首先需要确定我们的开发环境。

本次项目的文本编辑器可以使用 Visual Studio Code、Sublime、Atom 等软件。当然，也可以根据自己的实际情况选择其他编辑器。

注意：为了便于调试，本次项目建议使用 Chrome 浏览器，并且需要开启控制台。

代码结构

为了便于管理，我们需要把代码按照以下结构进行组织：

- css                      // 存放 CSS 文件
  |- style.css

- images                   // 存放图片资源文件
  |- bg.png
  |- gift.png
  |- pointer.png

- js                       // 存放 JS 文件
  |- jquery-3.5.1.min.js   // 引入 jQuery 库
  |- turntable.js          // 存放九宫格大转盘抽奖的代码

- index.html               // 项目的首页

HTML 结构

在 index.html 文件中，我们需要按照以下结构进行编写：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>九宫格大转盘抽奖</title>
    <link href="./css/style.css" rel="stylesheet">
  </head>
  <body>
    <div class="wrapper">
      <div class="turntable-wrap">
        <div class="turntable">
          <img src="./images/bg.png" alt="背景" class="bg">
          <div class="pointer-wrap"><img src="./images/pointer.png" alt="指针" class="pointer"></div>
          <ul class="gift-list">
            <li><img src="./images/gift.png" alt="礼物1"></li>
            <li><img src="./images/gift.png" alt="礼物2"></li>
            <li><img src="./images/gift.png" alt="礼物3"></li>
            <li><img src="./images/gift.png" alt="礼物4"></li>
            <li><img src="./images/gift.png" alt="礼物5"></li>
            <li><img src="./images/gift.png" alt="礼物6"></li>
            <li><img src="./images/gift.png" alt="礼物7"></li>
            <li><img src="./images/gift.png" alt="礼物8"></li>
            <li><img src="./images/gift.png" alt="礼物9"></li>
          </ul>
        </div>
        <button class="start">开始抽奖</button>
      </div>
    </div>

    <script src="./js/jquery-3.5.1.min.js"></script>
    <script src="./js/turntable.js"></script>
  </body>
</html>

以上 HTML 结构中，我们引入了必要的 CSS、JS 文件，并在其中添加了一个包含九宫格大转盘抽奖的代码块。其中，九宫格大转盘抽奖的代码块以 <div class="turntable"> 为容器，其中包含了背景图片、礼物列表以及指针。

CSS 样式

在 css/style.css 文件中，我们需要按照以下结构进行编写：

body {
  background-color: #f7f5f7;
}

.wrapper {
  margin: 0 auto;
  max-width: 600px;
  padding-top: 60px;
}

.turntable-wrap {
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.start {
  background-color: #f54292;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 20px;
  transition: background-color .2s linear;
}

.start:hover {
  background-color: #d8116b;
}

.turntable {
  background-position: center;
  background-size: cover;
  border: 10px solid #fff;
  border-radius: 50%;
  display: inline-block;
  height: 0;
  padding-top: 100%;
  position: relative;
  width: 0;
}

.turntable .bg {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.turntable .pointer-wrap {
  position: absolute;
  top: 0;
  left: 0;
  margin: 15%;
  width: 70%;
}

.turntable .pointer {
  margin-top: -50%;
  width: 100%;
}

.turntable .gift-list {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

.turntable .gift-list li {
  list-style: none;
  width: 33.33%;
  text-align: center;
  position: relative;
  padding-bottom: 37%;
  margin: 0;
}

.turntable .gift-list li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: 80%;
}

以上 CSS 样式中，我们通过 .turntable 类样式定义了九宫格大转盘抽奖的背景、指针和礼物列表的样式，并通过 .start 类样式定义了开始抽奖按钮的样式。

JS 逻辑

在 js/turntable.js 文件中，我们需要进行编写九宫格大转盘抽奖的 JS 逻辑。在这个过程中，我们需要使用到 jQuery 的很多方法，譬如 $.each()、$.click() 等。

以下是一个简单的示例：

$(function () {
  // 奖品数组
  var gifts = [
    '礼物1',
    '礼物2',
    '礼物3',
    '礼物4',
    '礼物5',
    '礼物6',
    '礼物7',
    '礼物8',
    '礼物9'
  ];

  // 获取指针
  var $pointer = $('.pointer');

  // 开始转盘
  $('.start').click(function () {
    // 获取随机奖品编号
    var idx = Math.floor(Math.random() * gifts.length);

    // 开始旋转动画
    var deg = 3600 + idx * (360 / gifts.length);
    $pointer.css({
      'transition': 'transform 5s cubic-bezier(.25, .75, .25, .75)',
      'transform': 'rotate(' + deg + 'deg)'
    });

    // 停止旋转动画并展示奖品
    setTimeout(function () {
      alert('恭喜你获得 ' + gifts[idx] + '！');
    }, 5000);
  });
});

以上 JS 逻辑中，我们定义了一个奖品数组 gifts，并绑定了开始抽奖按钮的点击事件。当开始抽奖按钮被点击时，我们随机获取一个奖品编号，并按照这个编号计算出指针需要旋转的角度。我们通过 CSS 样式设置中的 transform: rotate() 实现指针的旋转，并在旋转结束后展示获得的奖品。

另外需要注意的是，在九宫格大转盘抽奖中，我们涉及到很多的数学计算，譬如角度的计算、坐标的计算等。

示例说明

以上是一个简单的示例代码，通过按照以上步骤进行编写，我们就可以轻松地实现一个九宫格大转盘抽奖的功能。

为了方便大家的理解，以下是两条示例说明：

示例 1

我们已经编写好了九宫格大转盘抽奖的 HTML 结构和 CSS 样式，我们只需要编写 JS 逻辑：

我们首先声明一个奖品数组 gifts，其中包含 9 种奖品。
我们通过 jQuery 的 $() 方法获取到指针元素 $pointer。
当开始抽奖按钮 .start 被点击时，我们通过 Math.floor(Math.random() * gifts.length) 随机生成一个奖品编号 idx，并调整指针的旋转角度 $pointer.css('transform', 'rotate(' + deg + 'deg)')。
我们在指针旋转结束后，展示获得的奖品即可。

示例 2

由于在九宫格大转盘抽奖中牵扯到很多的数学计算，因此我们可以使用数学库如 math.js 简化我们的代码：

$(function () {
  // 引入 math.js 数学库
  math.config({
    number: 'BigNumber',
    precision: 20
  });

  // 奖品数组
  var gifts = [
    '礼物1',
    '礼物2',
    '礼物3',
    '礼物4',
    '礼物5',
    '礼物6',
    '礼物7',
    '礼物8',
    '礼物9'
  ];

  // 获取指针
  var $pointer = $('.pointer');

  // 开始转盘
  $('.start').click(function () {
    // 获取随机奖品编号
    var idx = Math.floor(Math.random() * gifts.length);

    // 开始旋转动画
    var deg = math.chain(3600).add(math.multiply(idx, math.chain(360).divide(gifts.length))).done();
    $pointer.css({
      'transition': 'transform 5s cubic-bezier(.25, .75, .25, .75)',
      'transform': 'rotate(' + deg + 'deg)'
    });

    // 停止旋转动画并展示奖品
    setTimeout(function () {
      alert('恭喜你获得 ' + gifts[idx] + '！');
    }, 5000);
  });
});

以上代码中，我们引入了 math.js 数学库，并使用其 math.chain()、math.add()、math.multiply()、math.divide() 等方法简化了九宫格大转盘抽奖的代码。这大大提高了代码的可读性和可维护性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery——九宫格大转盘抽奖实例 - Python技术站