阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 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. Apache DolphinScheduler 3.2.2 版本正式发布！

    Apache DolphinScheduler 3.2.2 版本正式发布! 近日,Apache DolphinScheduler 发布了 3.2.2 版本.此版本主要基于 3.2.1 版本进行了 bu ...

  2. MySQL手动执行rollback，内部实现分析

    -- 测试手动回滚操作 -- 1手动开启事务 START TRANSACTION -- 2执行更新操作语句 UPDATE FraBakNtuAnalysize SET IsDeleted = 0 WH ...

  3. 十五分钟两百行代码，手写一个vue项目全局通用的弹框

    前言: 我们在写vue项目时,弹框是非常常用的组件,并且在同一个项目中,弹框大多类似.所以我们可以抽离封装出一个通用的弹框: 因为vue3可向下兼容,所以作者这边会使用vue2的写法,vue3写法大同 ...

  4. 2024-08-24：用go语言，给定一个下标从1开始，包含不同整数的数组 nums，数组长度为 n。 你需要按照以下规则进行 n 次操作，将数组 nums 中的所有元素分配到两个新数组 arr1 和

    2024-08-24:用go语言,给定一个下标从1开始,包含不同整数的数组 nums,数组长度为 n. 你需要按照以下规则进行 n 次操作,将数组 nums 中的所有元素分配到两个新数组 arr1 和 ...

  5. HEOI游记

    \(NOI2024河北省选-HEOI游记\) ·评价 其实作为体验名额,最大的感觉就是自费旅游了一趟. 为什么说是自费呢?下面清点一下账单: 1.两晚酒店 1200 2.KFC 和 拉面 112 3. ...

  6. C# 导出Excel NPOI 修改指定单元格的样式 或者行样式

    参考文章:原文链接:https://blog.csdn.net/chensirbbk/article/details/52189985 #region 2.NPOI读取Excel 验证Excel数据的 ...

  7. 【YashanDB数据库】大事务回滚导致其他操作无法执行，报错YAS-02016 no free undo blocks

    问题现象 客户将一个100G的表的数据插入到另一个表中,使用insert into select插入数据.从第一天下午2点开始执行,到第二天上午10点,一直未执行完毕. 由于需要实施下一步操作,客户k ...

  8. rabbitmq高可用集群搭建

    需求分析基本情况 在进行RabbitMQ搭建时,我们基于现有的连接数据和业务需求进行了深入分析.目前的统计数据显示,连接数为631,队列数为80418.为了确保业务需求的顺利满足,我们需要在云产品和自 ...

  9. 鸿蒙应用开发：环境搭建(Mac)与项目构建

    ​ 2021年6月2日,华为发布了鸿蒙操作系统-HarmonyOS.它是一款"面向未来".面向全场景(移动办公.运动健康.社交通信.媒体娱乐等)的分布式操作系统.我们要基于Harm ...

  10. RxJS 系列 – 大杂烩

    前言 RxJS 有太多方法了, 想看完整的可以去看 REFERENCE – API List, 这篇介绍一些非 operator 的常用方法. NEVER NEVER.subscribe({ comp ...