阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 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. 【转载】 python进程绑定CPU

    版权声明:本文为CSDN博主「人间再无张居正」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/u01388765 ...

  2. 09-canvas绘制坐标系

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  3. 2. 基于MCU应用的EMC指南

    1. 硬件 主要的噪声感受器和发生器是印刷电路板(PCB)上的轨道和布线,特别是MCU附近的轨道和布线.因此,防止噪声问题的第一步行动涉及到PCB布局和电源设计.一般来说,MCU周围的元器件数量越少, ...

  4. .net core下使用事件总线

            随着微服务的火热,DDD(领域驱动设计模式)思想风起云涌,冲击着整个软件生态系统.其中,事件总线那是必须知道的了,于是我便抱着一个学习DDD的心态搭建了一个博客网站,目前该网站正在建设 ...

  5. 【Linux】之切换root用户与重启系统相关命令

    一.切换用户 <Linux中怎么从root用户切换到普通用户> su是在用户间切换,可以是从普通用户切换到root用户, test@ubuntu:~$ su Password: root@ ...

  6. Python 在PDF中添加条形码、二维码

    在PDF中添加条码是一个常见需求,特别是在需要自动化处理.跟踪或检索PDF文件时.作为一种机器可读的标识符,PDF中的条码可以包含各种类型的信息,如文档的唯一标识.版本号.日期等.以下是一篇关于如何使 ...

  7. 自己服务器搭建docker组和环境

    1. docker 当然首先安装一下docker,具体怎么 安装,网上搜一下.我用的ubuntu20系统,就是安装一个普通的软件的操作.安装后,运行一下docker run hello-world,运 ...

  8. 从Linq的Where方法理解泛型、委托应用场景

       最近遇到了一个问题,Linq的Where里面传递的是什么?Where的功能是什么实现的?没有第一时间答上来,在整理相关资料后决定自行实现Linq的Where方法来加深印象. 什么是泛型   指在 ...

  9. qumu虚拟机启动后无法远程连接

    通过 virsh 在启动 qemu 虚拟机,可以通过 VNC 访问虚拟机,但无法通过设置的 SSH 的外部映射端口登录.首先在宿主机上查看虚拟机(csv\tpm\name)的网络配置,可以看到端口映射 ...

  10. SQL Server – 基本操作 Table 和 Column

    前言 日常都是用 EF Core 来管理 Database, 偶尔也用 Management Studio, 就是很少手写 Command. 虽然网上一拉就有很多, 但是每次写单侧都要到处找还是挺烦的 ...