阅读原文,微信扫描二维码， 手机关注公共号酒酒酒酒，搜索 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. 代码随想录Day5

    242.有效的字母异位词 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词. 示例 ...

  2. Java设计模式之单例模式 通俗易懂 超详细 【内含案例】

    单例模式 推荐 Java 常见面试题 什么是单例模式 ? 确保程序中一个类只能被实例化一次,实现这种功能就叫单例模式 单例模式的好处是什么 ? 方便控制对象 节省资源减少浪费 怎么实现单例模式 ? 构 ...

  3. 【1】Kaggle赛题解读：RSNA 2024 Lumbar Spine Degenerative Classification

    赛题名称:RSNA 2024 Lumbar Spine Degenerative Classification 中文:腰椎退行性病变分类 kaggle官网赛题链接:https://www.kaggle ...

  4. Docker Windows 下的绑定挂载

    在 Windows 环境下进行绑定挂载时,需要注意路径的写法,需要使用 Windows 风格 (C:\xxx\xxx) 的路径,而不是 Cygwin (/c/xxx/xxx) 风格的路径.这一点在使用 ...

  5. 记 某List.sort()后排序结果异常

    背景:某次查看日志,发现数据不符合预期,希望获取的是降序排序,但是部分数据是乱序的 已知List.sort()方法应该不会出异常,所以应该是判断先后方法出问题了 果然,因为一开始写代码时,没有考虑到差 ...

  6. ipv6 知识

    ref: 网络编程懒人入门(十一):一文读懂什么是IPv6 https://cloud.tencent.com/developer/article/1551346 IT知识大全:IPv6详解

  7. ROS 知识

    安装 Ref: ROS安装过程中如何解决 rosdep update 命令出现错误 https://jiayaoo3o.github.io/2020/06/23/%E8%AE%B0%E5%BD%95% ...

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

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

  9. EF Core – Owned Entity Types & Complex Types

    前言 EF Core 8.0 推出了 Complex Types,这篇要来介绍一下. 由于它和 Owned Entity Types 傻傻分不清楚,加上我之前也没有写过 Owned Entity Ty ...

  10. k8s 中的 Ingress 简介

    〇.前言 前边已经介绍了 k8s 中的相关概念和 Service,本文继续看下什么是 Ingress. Ingress 的重要性不言而喻,它不仅统一了集群对外访问的入口,还提供了高级路由.七层负载均衡 ...