九宫格动画抽奖

最新推荐文章于 2024-09-01 23:06:50 发布
最新推荐文章于 2024-09-01 23:06:50 发布
阅读量123 收藏
点赞数
文章标签： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65209547/article/details/132599823
版权

      下面将提供两种形式的九宫格抽奖实现代码，一种是可控的，即可以固定结果；另一种是不可控的，通过随机时间来决定结果。废话不多说，上代码

一，可控（复制粘贴后---记得更改图片路径）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 340px;
        height: 340px;
        border: 1px #00ffff solid;
        position: relative;
        margin: 100px;
      }

      .box div {
        width: 100px;
        height: 100px;
        background-color: royalblue;
        text-align: center;
        line-height: 100px;
      }

      .div2 {
        position: absolute;
        top: 10px;
        left: 10px;
      }

      .div3 {
        position: absolute;
        top: 10px;
        left: 120px;
      }

      .div4 {
        position: absolute;
        top: 10px;
        left: 230px;
      }

      .div5 {
        position: absolute;
        top: 120px;
        left: 230px;
      }

      .div6 {
        position: absolute;
        top: 230px;
        left: 230px;
      }

      .div7 {
        position: absolute;
        top: 230px;
        left: 120px;
      }

      .div8 {
        position: absolute;
        top: 230px;
        left: 10px;
      }

      .div9 {
        position: absolute;
        top: 120px;
        left: 10px;
      }

      .button {
        width: 100px;
        height: 100px;
        background-color: #62c6a3;
        position: absolute;
        text-align: center;
        line-height: 100px;
        top: 120px;
        left: 120px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="div2">短裙</div>
      <div class="div3">口红</div>
      <div class="div4">草莓</div>
      <div class="div5">西瓜</div>
      <div class="div6">奶茶</div>
      <div class="div7">美甲</div>
      <div class="div8">谢谢参与</div>
      <div class="div9">苹果13</div>
      <strong class="button"> 点击抽奖</strong>
    </div>
  </body>
  <script>
    let button = document.getElementsByClassName("button")[0];
    let box = document.getElementsByClassName("box")[0];
    let pirze = box.getElementsByTagName("div");
    console.log(pirze);

    let k = 0;
    let time = 500;
    let count = 0;
    let int;
    let rom = 0;
    button.onclick = eve;

    function eve() {
      pirze[k].style.background = "pink";
      int = setInterval(pu, time);
      rom = Math.floor(Math.random() * pirze.length); //在这里控制，rom为下标
      // rom = 1;
      button.onclick = null;
    }

    function pu() {
      if (k < pirze.length - 1) {
        k++;
        pirze[k - 1].style.background = "royalblue";
        pirze[k].style.background = "pink";
      } else {
        k = 0;
        count++;
        pirze[pirze.length - 1].style.background = "royalblue";
        pirze[k].style.background = "pink";
      }
      if (count <= 5) {
        if (time <= 100) {
          time = 100;
        } else {
          time -= 20;
        }
      } else {
        if (time >= 500) {
          time = 500;
        } else {
          time += 20;
        }
      }
      if (count > 7 && rom == k) {
        clearInterval(int);
        count = 0;
        rom = 0;
        time = 500;
        button.onclick = eve;
        let text = pirze[k].innerHTML;
        setTimeout(function () {
          alert("恭喜您获得：" + text);
        }, 300);
      } else {
        clearInterval(int);
        int = setInterval(pu, time);
      }
    }
  </script>
</html>

二，不可控（复制粘贴后---记得更改图片路径）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 390px;
        margin: 0 auto;
        padding: 10px;
        background-color: #ccc;
      }
      ul {
        width: 100%;
        height: 100%;
        margin: auto;
        padding: 0px;
        display: flex;
        flex-wrap: wrap;
      }
      li {
        width: 120px;
        height: 120px;
        margin: 5px;
        position: relative;
        border-radius: 5px;
        list-style: none;
        background-size: cover;
        background-repeat: no-repeat;
      }
      li:nth-of-type(1) {
        background-image: url("./9.webp");
      }
      li:nth-of-type(2) {
        background-image: url("./2.webp");
      }
      li:nth-of-type(3) {
        background-image: url("./3.webp");
      }
      li:nth-of-type(4) {
        background-image: url("./4.webp");
      }
      li:nth-of-type(6) {
        background-image: url("./5.webp");
      }
      li:nth-of-type(7) {
        background-image: url("./6.webp");
      }
      li:nth-of-type(8) {
        background-image: url("./7.webp");
      }
      li:nth-of-type(9) {
        background-image: url("./8.webp");
      }
      #startBtn {
        width: 100%;
        height: 100%;
        background-color: white;
        border: 0px;
        background-size: cover;
        background-repeat: no-repeat;
        /* background-image: url("../image/抽奖.jpg"); */
      }
      .active::after {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        content: "";
        z-index: 1;
        opacity: 0.5;
        background-color: yellow;
      }
      #record {
        background-color: #fff;
        border-radius: 5px;
        height: 50px;
        overflow-y: scroll;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li><button id="startBtn">开始抽奖</button></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
      </ul>
      <div>
        <h3>奖品记录</h3>
        <div id="record"></div>
      </div>
    </div>
  </body>
  <script>
    //获取抽奖按钮
    let startBtn = document.getElementById("startBtn");
    //获取奖品项目的集合
    let items = document.getElementsByClassName("item");
    //获取奖品记录值
    let record = document.getElementById("record");
    //设置奖品滚动的顺序，即控制奖品转动的方向
    let directionArr = [0, 1, 2, 4, 7, 6, 5, 3];
    //抽奖的开关
    let flag = true;
    //抽到的奖品的数组下标
    let awardIndex = 0;
    //定义定时器标识符
    let timer = null;

    //1.点击抽奖按钮
    startBtn.onclick = () => {
      //2.当抽奖开关为true时，可以点击抽奖
      if (flag) {
        //当抽奖开关为false时，处于抽奖状态中
        flag = false;
        //更换抽奖的状态-禁止点击抽奖
        startBtn.disabled = true;
        //3.定义定时器，转动奖品
        timer = setInterval(() => {
          //未转到的奖品的样式
          items[directionArr[awardIndex]].className = "item";
          //对奖品下标进行自增，实现奖品连在一起转动
          awardIndex++;
          //当奖品的下标超过数组下标时，赋值为0重新开始转圈
          if (awardIndex >= 8) {
            awardIndex = 0;
          }
          //转到的奖品的样式
          items[directionArr[awardIndex]].className += " active";
        }, 100);
      }

      //4.定义一个延时器，到时间则停止转动
      setTimeout(() => {
        // awardIndex = Math.floor(Math.random() * directionArr.length) - 1;
        //5.清理定时器，停止转动
        clearInterval(timer);
        //解除按钮的禁止状态
        startBtn.disabled = false;
        //开关值赋值为true
        flag = true;
        //定义奖品字符串
        let award = "";
        //6.获取抽奖的奖品下标来判断获取的奖品
        switch (directionArr[awardIndex]) {
          case 0:
            award = "iphoneX";
            break;
          case 1:
            award = "再来一次";
            break;
          case 2:
            award = "百度网盘VIP";
            break;
          case 3:
            award = "牛排券";
            break;
          case 4:
            award = "纪念U盘";
            break;
          case 5:
            award = "瓶酒一扎";
            break;
          case 6:
            award = "谢谢参与";
            break;
          case 7:
            award = "PS4 pro";
            break;
        }

        //7.对抽中的奖品进行记录
        record.innerHTML += "你抽到了" + award + "<br/>";
      }, Math.round(Math.random() * 3000) + 1500);
    };
    // Math.round(Math.random() * 3000 +)
  </script>
</html>

@.十七
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
matlab编摇奖程序,一个简单的大转盘抽奖程序（附.NetCore Demo源码）
weixin_36170766的博客
03-24 1478
public async Task GetLuckyAction(intaccountId){var res = newLuckyProduct();try{var allow = Db.Queryable().Where(e => e.AccountId ==accountId).First();if (allow == null || allow.AllowCount <= 0)r...
九宫格抽奖源码，抽奖代码，转盘源码，九宫格顺时针抽奖代码，九宫格特效
06-13
首先，九宫格抽奖的核心在于其顺时针旋转的动画效果。这一效果通常是通过JavaScript来实现的，可能利用了CSS3的transform属性和transition属性，以实现平滑的转动过渡。在`js`目录下的文件很可能是用于处理抽奖逻辑...
九宫格大转盘抽奖
zengZeng的博客
09-03 1480
页面效果如下： <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <title>九宫格转盘</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width...
九宫格抽奖代码实现
qq_16139383的博客
02-03 1986
转盘抽奖demo 核心代码 class Lottery { constructor(domId) { this.prizeIndexArr = [0, 1, 2, 5, 8, 7, 6, 3] // 顺时针转动对应的奖品序号 this.maxStep = this.prizeIndexArr.length * 5 // 最大滚动的格子数 this.currentIndex = -1 // 当前滚动到的格子的index this.ste
Flutter 实现九宫格抽奖动画效果
上辈子作恶多端，这辈子写前端。
10-20 1773
通过Flutter实现的九宫格抽奖效果
php九宫格抽奖思路,九宫格抽奖概率问题！！
weixin_42110070的博客
03-20 799
这种逻辑应该后台写，并且在提交中奖结果时要进行验证，否则前端太容易篡改数据了。点击抽奖时，请求后台后台返回抽奖结果前端播放抽奖动画，并且保证最后停在返回的中奖结果项上--- 更新 ---大致给你个权重算法// 权重越小越难中奖// 这里iphone中奖概率为 1/2001 大致为 0.000499const prizeList = [{ name: 'iphone', weight: 1 },{ ...
原生js实现九宫格抽奖动画
weixin_45781661的博客
07-25 788
原生js实现九宫格抽奖动画
九宫格抽奖动效
weixin_50367873的博客
08-02 578
js实现九宫格抽奖效果
vue-九宫格抽奖
weixin_50367873的博客
09-19 521
vue九宫格抽奖系统
android九宫格抽奖功能,Android开发12宫格抽奖
weixin_36310141的博客
05-26 493
一、效果图抽奖.png二、关键代码NineLuckPanpublic class NineLuckPan extends View {private Paint mPaint;private ArrayList mRects;//存储矩形的集合private float mStrokWidth = 5;//矩形的描边宽度private int[] mItemColor = {Color.GREEN...
实现一个九宫格抽奖，全部到位
05-07
实现一个九宫格抽奖，全部到位
安卓动画效果相关-炫酷九宫格抽奖demo.rar
07-29
在安卓应用开发中，动画效果是提升用户体验的重要一环，特别是在设计交互界面时，炫酷的九宫格抽奖效果能够吸引用户的注意力并增加娱乐性。这个"安卓动画效果相关-炫酷九宫格抽奖demo"提供了实现此类效果的示例代码...
原生JS实现九宫格抽奖
10-14
九宫格抽奖是一种常见的交互式游戏，通常包含九个单元格，每个单元格放置不同的奖品名称或标识，用户通过点击操作触发抽奖开始，在规定的时间内，单元格内元素会以某种动画效果快速切换，之后停留下来，用户获得的...
算法的学习笔记—连续子数组的最大和
业精于勤，荒于嬉
08-29 3655
通过上述的动态规划方法，我们能够有效地解决连续子数组的最大和问题。该方法简单易懂，并且具有较高的效率，适合在大多数情况下使用。😁热门专栏推荐想学习vue的可以看看这个java基础合集数据库合集redis合集nginx合集linux合集手写机制微服务组件spring_尘觉springMVCmybits🤔欢迎大家加入我的社区尘觉社区文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞。
【学习笔记】卫星通信NTN 3GPP标准化进展分析（六）- 参考标准
最新发布
u011376987的博客
09-01 999
本文总结了NTN标准化进程以及后续的研究计划，是学习NTN协议的入门。本文来自3GPP Joern Krause, 3GPP MCC。
12306项目学习笔记（框架篇Base）
qq_74851649的博客
08-30 1071
首先学习的是基础框架提供了一种静态方式来访问Spring容器中的Bean，适用于某些特定场景，如工具类和框架集成。在12306项目中由于我们引入了RocketMQ消息队列，这些库的对象通常不是Spring管理的，无法直接使用@Autowired注入，所以需要类提供一种静态方式来访问Spring容器中的Bean。比如在我们的TicketServiceImpl中的bean对象就是用以下方法获取的。
Java基础（6）- Java代码笔记3
weixin_47062560的博客
08-30 3058
数据类型[][] 数组名 = new 数据类型[m][n]数据类型 数组名[][] = new 数据类型[m][n]数据类型[] 数组名[] = new 数据类型[m][n]m：代表二维数组长度n：代表二维数组中每个一维数组的长度。
Vue实现九宫格抽奖功能详解
7. **动画效果**：虽然这里没有具体提到，但九宫格抽奖通常会包含旋转、淡入淡出等动画效果，这可以通过CSS3的`transition`和`transform`属性实现，或者使用Vue的过渡系统（Vue transitions）来处理。 8. **方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值