阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 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语言：通过对100个常用网站进行网络连接操作来判断当前的网络情况（是否被断掉）

    由于需要判断网络的通信情况,比如判断网络是否掉线,因此想到了一个笨方法,那就是对100个大型网站进行网络连接操作,通过是否连接成功来判断当前的网络是否被断掉. 这里的思路是只要大部分的网站可以连接通那 ...

  2. Ubuntu系统中CUDA套件nvvp启动后报错Failed to load module "canberra-gtk-module"

    最近在看cuda方面的内容,需要对cuda代码做一些性能分析,于是需要使用nvvp,但是启动nvvp后报错:Failed to load module "canberra-gtk-modul ...

  3. springboot项目启动时禁止Redis、数据对象加载

    1.背景 2.实现方式 启动类上添加需要排除的自动装配对象 @SpringBootApplication(exclude = {DataSourceAutoConfiguration.class, H ...

  4. 部署CPU与GPU通用的tensorflow：Anaconda环境

      本文介绍在Anaconda环境中,下载并配置Python中机器学习.深度学习常用的新版tensorflow库的方法.   在之前的两篇文章Python TensorFlow深度学习回归代码:DNN ...

  5. 系统IO常用函数接口

    本文整理归纳了几种常用的系统IO的函数借口,以供读者查阅使用 目录 系统IO与标准IO的区别 打开文件:open 关闭文件:close 文件读取:read 文件写入:write 位置偏移:lseek ...

  6. 附038.Kubernetes_v1.30.3高可用部署架构二

    部署组件 该 Kubernetes 部署过程中,对于部署环节,涉及多个组件,主要有 kubeadm .kubelet .kubectl. kubeadm介绍 Kubeadm 为构建 Kubernete ...

  7. 抖音集团 FlinkSQL 性能优化探索及实践

    本文作者:李精卫   更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群   背景 随着抖音集团内部对流式任务的需求不断增长,Flink SQL作为一种低成本接入手段 ...

  8. C#/.NET/.NET Core定时任务调度的方法或者组件[转载]

    原文由Rector首发于 码友网 之 <C#/.NET/.NET Core应用程序编程中实现定时任务调度的方法或者组件有哪些,Timer,FluentScheduler,TaskSchedule ...

  9. Manual 命令手册导出

    man 命令的输出中含有大量的格式化字符和终端控制序列,这些是用来在终端中正确显示格式化文本(如加粗,下划线,分页等)所用的.如 BS(Backspace,退格). 如果我们直接用 man comma ...

  10. Docker 优化NUXT镜像体积

    FROM node:xxx-alpine # 环境变量赋值 ENV 参数名 参数值 RUN mkdir -p /app COPY ./app/package.json /app/package.jso ...