阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 JS 转盘抽奖效果

效果图

前置条件：

开发环境：windows

开发框架：js

编辑器：HbuilderX

正文开始

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="description" content="">

    <meta name="author" content="熊仔其人">

    <title>转盘抽奖效果</title>

    <!-- 这里是css部分 -->

    <style>

        *{

      padding: 0;

      margin: 0;

      list-style: none;

    }

    .outher,.wapper{

      position: relative;

      width: 300px;

      height: 300px;

      background-color: red;

      border-radius: 50%;

      overflow: hidden;

    }

    .wapper{

      transform: rotate(22.5deg);

    }

    .left,.right{

      width: 150px;

      height: 100%;

      overflow: hidden;

      position: absolute;

    }

    .left div,.right div{

      position: absolute;

      width: 150px;

      height: 100%;

    }

    .left div{

      transform-origin:right center;

    }

    .right div{

      transform-origin:left center;

    }

    .left{

      left: 0;

      background-color: burlywood;

    }

    .right{

      right: 0;

      background-color: blue;

    }

    .left div.one{

      background-color: #fc7c78;

    }

    .left div.two{

      background-color: #f59462;

      transform: rotate(-45deg);

    }

    .left div.three{

      background-color: #fc7c78;

      transform: rotate(-90deg);

    }

    .left div.four{

      background-color: #f59462;

      transform: rotate(-135deg);

    }

    .right div.one{

      background-color: #f59462

    }

    .right div.two{

      background-color: #fc7c78;

      transform: rotate(45deg);

    }

    .right div.three{

      background-color: #f59462;

      transform: rotate(90deg);

    }

    .right div.four{

      background-color: #ffffff;

      transform: rotate(135deg);

    }

    .left .text{

      position: absolute;

      left: 50%;

      top:30px;

      transform: rotate(-30deg);

    }

    .right .text{

      position: absolute;

      left: 12%;

      top:30px;

      transform: rotate(30deg);

    }

    .circle{

      position: absolute;

      width: 90px;

      height: 90px;

      background-color: orange;

      left: 50%;

      top: 50%;

      transform: translate(-50%,-50%);

      border-radius: 50%;

      text-align: center;

      line-height: 90px;

      font-size: 30px;

      font-weight: bold;

      cursor: pointer;

      user-select: none;

    }

    .circle::after{

      content: '';

      position: absolute;

      top: -78px;

      left: 50px;

      transform: translate(-50%);

      border: 40px solid orange;

      border-left-width: 10px;

      border-right-width: 10px;

      border-left-color: transparent;

      border-top-color: transparent;

      border-right-color: transparent;

    }

</style>

</head>

<body>

    <!-- 这里是HTML结构部分 -->

    <div class="outher">

    <div class="wapper">

      <div class="left">

        <div class="one">

          <span class="text">1号大奖</span>

        </div>

        <div class="two">

          <span class="text">2号大奖</span>

        </div>

        <div class="three">

          <span class="text">3号大奖</span>

        </div>

        <div class="four">

          <span class="text">4号大奖</span>

        </div>

      </div>

      <div class="right">

        <div class="one">

          <span class="text">5号大奖</span>

        </div>

        <div class="two">

          <span class="text">6号大奖</span>

        </div>

        <div class="three">

          <span class="text">7号大奖</span>

        </div>

        <div class="four">

          <span class="text">未中奖</span>

        </div>

      </div>

    </div>

    <div class="circle">

      抽奖

    </div>

  </div>

    <!-- 这里是js部分 -->

    <script>

    let wapper = document.querySelector(".wapper");

    let textAll=document.querySelectorAll(".text");

    let texts=["x1号大奖","x2号大奖","x3号大奖","x4号大奖","x5号大奖","x6号大奖","x7号大奖","未中奖"];

    // 是否抽奖中

    let isFlag=true;

    /*

    中奖概率比重设置,最后一个数值越大,中奖概率越小

    */

    let weight = [1,5,10,15,22,30,40,200];

    // 循环得到奖项容器,给里面赋值奖项内容

    for(let i=0;i<textAll.length;i++){

      textAll[i].innerHTML=texts[i];

    }

    // 点击抽奖指针

    document.querySelector(".circle").onclick=function(){

      if(isFlag){

        // 生成0~200的随机数,随机抽奖;生成的随机数越大,中奖概率越小

        let random=parseInt(Math.random()*(weight[weight.length-1]));

        /*

         将生成的随机数合并到数组中，生成新的数组randomWeight

        */

        let randomWeight=weight.concat(random);

        /*

         将数组从小到大排序。此时生成的随机数将被排序到前面

         生成的随机数小于weight数组中最后一个数字的会被放在前面

        */

        let aa=randomWeight.sort(function(a,b){return a - b});

        // 在新数组里面查找生成的随机数下标

        let randomIndex = aa.indexOf(random);

        // 找到随机数的下标，并且根据随机数的下标取到texts的奖项内容

        switch(randomIndex){

          case 0:

            run(22.5,texts[randomIndex]);

            break;

          case 1:

            run(66.5,texts[randomIndex]);

            break;

          case 2:

            run(112.5,texts[randomIndex]);

            break;

          case 3:

            run(157.5,texts[randomIndex]);

            break;

          case 4:

            run(338.5,texts[randomIndex]);

            break;

          case 5:

            run(294.5,texts[randomIndex]);

            break;

          case 6:

            run(247.5,texts[randomIndex]);

            break;

          case 7:

            run(201.5,texts[randomIndex]);

            break;

        }

      }

    }

    let timer=null;

    function run(angle,text){

      isFlag=false;

      // 转动的最终圈数

      let begin=0;

      // 最小转动圈数

      let basic=1400;

      timer=setInterval(function(){

        /*

         转盘转动的圈数

         此处乘以0.1 可以让转动的速度逐渐缓慢

        */

        begin+=Math.ceil((basic+angle-begin)*0.1);

        if(begin>(basic+angle)){

          isFlag=true;

          clearInterval(timer);

        }

        // 设置转盘旋转圈数

        wapper.style.transform="rotate("+begin+"deg)";

        // 生成旋转圈数,可以让转盘缓慢停止;

      },50);

    }

</script>

</body>

</html>

JS 转盘抽奖效果的更多相关文章

  1. 简单JS旋转实现转盘抽奖效果

    闲来没事,做了一个模拟转盘抽奖的HTML&JS的效果: 可以在设置的时候,选择几个区域,并且可以填写指针将要停止的区域 比如,我选择了"区域2",结果就是这样 具体可以见下 ...

  2. js转盘抽奖

    这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...

  3. 原生js轮盘抽奖实例分析（幸运大转盘抽奖）

    效果图: 所需图片素材: 这张图是pointer.png的位置的. turntable-bg.jpg这张是转盘背景图,在背景位置. 这张是turntable.png位置的. 需要这三张图片,如果要实现 ...

  4. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  5. web：转盘抽奖

    移动web:转盘抽奖(幸运大转盘)   为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转 ...

  6. 移动web：转盘抽奖(幸运大转盘)

    为了获取客户.回馈客户,平台一般会推出抽奖活动类的营销页.因此web页面中,有各式各样的抽奖效果. 格子式(九宫格),背景滚动式(数字/文字/图案),旋转式(转盘),游戏式(砸蛋/拼图...).... ...

  7. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  8. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  9. js实现转盘抽奖

    大转盘抽奖,主要通过css3的"transform:rotate(0deg)"属性来控制元素的旋转角度来实现. 通常,抽奖的过程需要渐进的效果,所以直接通过旋转属性写比较繁琐. 这 ...

  10. js转盘大抽奖 自定义概率

    公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配 ...

随机推荐

  1. 为什么不建议在华为技术论坛（昇腾论坛/mindspore技术论坛）发表帖子和技术博客

    华为的硬件设计技术在国内没得说,华为的硬件制造技术基本就没听说过,而华为的软件技术可是出了名的不咋样.一年前曾经在昇腾的页面进入到华为技术论坛,并且发了几篇关于mindspore的编译问题的帖子,由于 ...

  2. 代码随想录Day6

    454.四数相加Ⅱ 给你四个整数数组 nums1.nums2.nums3 和 nums4 ,数组长度都是 n ,请你计算有多少个元组 (i, j, k, l) 能满足: 0 <= i, j, k ...

  3. 高效调度新篇章：详解DolphinScheduler 3.2.0生产级集群搭建

    转载自tuoluzhe8521 导读:通过简化复杂的任务依赖关系, DolphinScheduler为数据工程师提供了强大的工作流程管理和调度能力.在3.2.0版本中,DolphinScheduler ...

  4. Android网页投屏控制从入门到放弃

    背景 业务需要采集在app上执行任务的整个过程,原始方案相对复杂,修改需要协调多方人员,因而考虑是否有更轻量级的方案. 原始需求: 记录完成任务的每一步操作(点击.滑动.输入等) 记录操作前后的截图和 ...

  5. Namomo Summer Camp 23 Day 1(GCPC2021)

    Namomo Summer Camp 23 Day 1(GCPC2021) Problem B: Brexiting and Brentering 签到 #include<bits/stdc++ ...

  6. AWS Data Analytics Fundamentals 官方课程笔记 - Intro, Volumn, Velocity

    Intro process 就是 The process component is where services manipulate data into needed forms. 比如补齐 nul ...

  7. C++ : 如何用C语言实现C++的虚函数机制？

    前言 在 googletest的源码中,看到gtest-matchers.h 中实现的MatcherBase 类自定义了一个 VTable,这种设计实现了一种类似于C++虚函数的机制.C++中的虚函数 ...

  8. 原生JavaScript实现一个简单的Promise构造函数示例

    下面demo示例,只支持实例的then和catch,代码如下: function PromiseDiffer(fn){ var self = this; this.status = 'pendding ...

  9. A4纸尺寸

    A4纸尺寸 A4纸尺寸:210×297: A3纸尺寸:297×420: A2纸尺寸:420×594: A1纸尺寸:594×841: A0纸尺寸:841×1189: 备注:长(mm)×宽(mm) 单位: ...

  10. Email 关于 POP3 IMAP SMTP office365 Outlook Gmail G-Suit shared mailbox小小理解

    Outlook 是微软的一个 email 软件, 管理 email 的 UI. Gmail 是 google 的 office365 是一个配套, 里面有 email, one drive, exce ...