原生JS实现抽奖

已于 2024-01-05 15:16:13 修改
阅读量573 收藏 8
点赞数 12
分类专栏： ==========前端========= HTML5 CSS 文章标签： javascript css 前端
于 2024-01-05 09:33:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42794545/article/details/135397672
版权
文章介绍了如何使用HTML、CSS和JavaScript实现一个转盘活动的布局，包括转盘旋转效果、适配手机屏幕、动画流畅性和表单的延迟显示。作者分享了两种解决方案并邀请读者提出批评和优化建议。
摘要由CSDN通过智能技术生成

1、效果展示 

    0. 制作一个MiniSize使用提供的素材实现一个转盘活动的布局（如下图所示）；

  1. 进入界面后2秒钟后开始旋转，5秒钟后停止旋转；
  2. 并且3秒后进入一个表单界面（如下图2所示）；
  3. 界面要求适配现主流的手机屏幕及手机浏览器；
  4. 要求界面切换连贯，动画流畅。
  5. 请保证视觉效果的还原度以及代码整洁度。

2、实现思路

  • 旋转圆盘，image1.style.animation = 'rotateAnimation 0.5s linear 10'，来实现旋转
  • 用await阻塞进入表单的任务加入微任务队列，使得表盘先旋转玩了之后再跳转到表单页面
  • 进入表单界面，设置定时器为8s（5+3）包含了旋转转盘的时间和旋转之后等待时间。

这些完全都是自己设计的，哪里有错误和需要优化的欢迎批评指正，大家一起学习交流谢谢。

  • 一个小伙伴的建议：停止旋转单独写出来，所以下面有一个方案二 

3、参考代码

  • 方案一

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.8">
  <title>转盘活动</title>
  <style>
    /* 在这里添加 CSS 样式 */
    /* 手机屏幕适配 */
    @media (max-width: 599px) {
    .container  {
      padding: 10px;
    }
    }
    #app {
    /* 容器元素的样式和布局 */
        display: flex;
        justify-content: center;
        align-items: center; /* 水平居中 */  
        align-content: center; /* 垂直居中 */  
        height: 100vh;
        margin: 0;
        color: #666666;
    }
    .image1 {
        position: absolute;
    }

    .image2 {
        position: relative;
    }


    .form {
    /* 表单界面样式 */
            margin-top: 10px;
            font-size: 16px; /* 设置字体大小 */
            /* border: 1px solid #ccc; */
            /* padding: 20px; */
            border-radius: 5px;
            height: 80%;
            width: 80%; /* 限制表单宽度 */
    }
     /* 背景颜色 */
    body {
        background-color: #E7E7E7;
    }

    /* 按钮样式 */
    .button {
        margin-top: 3px;
        width: 92%;
        background-color: #F03D3C;
        color: #FFFFFF;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    input{
        margin-top: 5px;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 80%;
        

    }
    select{
        margin-top: 5px;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 92%;
        

    }

    /* 边框样式 */
    .border {
        border: 1px solid #E5E5E5;
        padding: 10px;
    }

     

    @keyframes rotateAnimation {  
        from {  
          transform: rotate(0deg);  
        }  
        to {  
          transform: rotate(360deg);  
        }  
    }
  </style>
  </head>
  <body>
  <div id="app">
    <div class="turntable">
    <!-- 转盘活动的内容 -->
    <img class="image1" src="images/loto-p.png" alt="">
    <img class="image2" src="images/loto-z.png" alt="">
    
    </div>
    <div class="form" style="display: none; ">
        <form id="personalInfoForm">
            <label for="name">收货人姓名</label><br>
            <input type="text" placeholder="收货人姓名" id="name" name="name" required><br>

            <label for="email">手机号码</label><br>
            <input type="tel"  placeholder="请输入您的手机号码" id="tel" name="tel" required><br>

            <label for="age">手机验证码</label><br>
            <input type="number"  placeholder="手机验证码" id="age" style="width: 35%;" name="age" required>
            <input type="submit"  class="button" style="margin-left:2px;width: 44%;" value="获取验证码"><br>

            <label for="address">选择地区</label><br>
            <!-- <input type="text"  placeholder="省份"  id="age" name="age" required><br> -->
            <!-- <input type="text"  placeholder="城市"  id="age" name="age" required><br> -->
            <select id="province" name="province">  
              <option value="">省份</option>  
              <option value="省份1">省份1</option>  
              <option value="省份2">省份2</option>  
              <option value="省份3">省份3</option>  
            </select> 
            <select id="city" name="city">  
              <option value="">城市</option>  
              <option value="城市1">城市1</option>  
              <option value="城市2">城市2</option>  
              <option value="城市3">城市3</option>  
            </select>  
            <br>

            <label for="address">详细地址</label><br>
            <input type="text"  placeholder="例如XX街道XX号" id="email" name="email" required><br>

            <input type="submit"  class="button" value="提交">
        </form>
    </div>
  </div>

  <script>
    var image1 = document.querySelector('.image1');
    var image2 = document.querySelector('.image2');
    var form = document.querySelector('.form');
    var angle = 0;  
    // 页面加载事件
    window.addEventListener('load', async function() {
        // 延迟 2 秒开始旋转5s
        await startRotation()
        // 3 秒后显示表单界面
        showForm()  
    });

    function startRotation() {
         // 启动旋转动画的逻辑
      return new Promise(resolve => 
        setTimeout(()=>{
            image1.style.animation = 'rotateAnimation 0.5s linear 10'
            resolve(); 
        }
      , 2000))
    }

    function showForm() {
          // 显示表单界面的逻辑
      new Promise(resolve => 
          setTimeout(()=>{ 
            image1.style.display = 'none';
            image2.style.display = 'none';
            form.style.display = 'block';
            resolve(); 
          }
      , 8000)); 
    }
    
  </script>
  </body>
</html>
  • 方案二
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.8">
  <title>转盘活动</title>
  <style>
    /* 在这里添加 CSS 样式 */
    /* 手机屏幕适配 */
    @media (max-width: 599px) {
    .container  {
      padding: 10px;
    }
    }
    #app {
    /* 容器元素的样式和布局 */
        display: flex;
        justify-content: center;
        align-items: center; /* 水平居中 */  
        align-content: center; /* 垂直居中 */  
        height: 100vh;
        margin: 0;
        color: #666666;
    }
    .image1 {
        position: absolute;
    }

    .image2 {
        position: relative;
    }


    .form {
    /* 表单界面样式 */
            margin-top: 10px;
            font-size: 16px; /* 设置字体大小 */
            /* border: 1px solid #ccc; */
            /* padding: 20px; */
            border-radius: 5px;
            height: 80%;
            width: 80%; /* 限制表单宽度 */
    }
     /* 背景颜色 */
    body {
        background-color: #E7E7E7;
    }

    /* 按钮样式 */
    .button {
        margin-top: 3px;
        width: 92%;
        background-color: #F03D3C;
        color: #FFFFFF;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }
    input{
        margin-top: 5px;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 80%;
        

    }
    select{
        margin-top: 5px;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        width: 92%;
        

    }

    /* 边框样式 */
    .border {
        border: 1px solid #E5E5E5;
        padding: 10px;
    }

     

    @keyframes rotateAnimation {  
        from {  
          transform: rotate(0deg);  
        }  
        to {  
          transform: rotate(360deg);  
        }  
    }
  </style>
  </head>
  <body>
  <div id="app">
    <div class="turntable">
    <!-- 转盘活动的内容 -->
    <img class="image1" src="images/loto-p.png" alt="">
    <img class="image2" src="images/loto-z.png" alt="">
    
    </div>
    <div class="form" style="display: none; ">
        <form id="personalInfoForm">
            <label for="name">收货人姓名</label><br>
            <input type="text" placeholder="收货人姓名" id="name" name="name" required><br>

            <label for="email">手机号码</label><br>
            <input type="tel"  placeholder="请输入您的手机号码" id="tel" name="tel" required><br>

            <label for="age">手机验证码</label><br>
            <input type="number"  placeholder="手机验证码" id="age" style="width: 35%;" name="age" required>
            <input type="submit"  class="button" style="margin-left:2px;width: 44%;" value="获取验证码"><br>

            <label for="address">选择地区</label><br>
            <!-- <input type="text"  placeholder="省份"  id="age" name="age" required><br> -->
            <!-- <input type="text"  placeholder="城市"  id="age" name="age" required><br> -->
            <select id="province" name="province">  
              <option value="">省份</option>  
              <option value="省份1">省份1</option>  
              <option value="省份2">省份2</option>  
              <option value="省份3">省份3</option>  
            </select> 
            <select id="city" name="city">  
              <option value="">城市</option>  
              <option value="城市1">城市1</option>  
              <option value="城市2">城市2</option>  
              <option value="城市3">城市3</option>  
            </select>  
            <br>

            <label for="address">详细地址</label><br>
            <input type="text"  placeholder="例如XX街道XX号" id="email" name="email" required><br>

            <input type="submit"  class="button" value="提交">
        </form>
    </div>
  </div>

  <script>
    var image1 = document.querySelector('.image1');
    var image2 = document.querySelector('.image2');
    var form = document.querySelector('.form');
    
    // 页面加载事件
    window.addEventListener('load', async function() {
        // 1、延迟 2 秒开始旋转5s
        await startRotation()
        // 2、停止旋转
        await stopRotation()
        // 3、3 秒后显示表单界面
        showForm()  
    });

    function startRotation() {
         // 启动旋转动画的逻辑
      return new Promise(resolve => 
        setTimeout(()=>{
            image1.style.animation = 'rotateAnimation 0.5s linear 20'
            resolve(); 
        }
      , 2000))
    }
    function stopRotation() {
         // 启动旋转动画的逻辑
      return new Promise(resolve => 
        setTimeout(()=>{
            image1.style.animation = 'none'
            resolve(); 
        }
      , 5000))
    }

    function showForm() {
       
          // 显示表单界面的逻辑
      new Promise(resolve => 
          setTimeout(()=>{ 
            image1.style.display = 'none';
            image2.style.display = 'none';
            form.style.display = 'block';
            resolve(); 
          }
      , 3000)); 
    }
    
  </script>
  </body>
</html>

海伦•
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js生成旋转抽奖
m0_69045017的博客
09-27 106
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
原生javascript实现抽奖动画
王某的博客
08-25 1323
动态增加元素 .son { width: 100px; background: palegreen; float: left; margin-left: 10px; margin-bottom: 10px; text-align: center; font: bold 15px/100px "微软雅黑"; border-radius: 5px; } #pa
原生js完成一个简单的抽奖功能
提灯寻猫
12-18 2858
用原生js的方式完成简单的抽奖功能
JS原生代码- 随机抽奖大转盘
SYQ15544423296的博客
06-30 1704
JS原生代码- 随机抽奖大转盘
原生js实现轮盘抽奖，控制中奖概率(完整示例)
热门推荐
marendu的博客
07-29 3万+
文章目录1.实现旋转2.控制得奖概率3. 控制旋转动画落点4.测试概率完整代码 本想找一个现成的，结果发现网上只有能实现转了，但是效果并不是让人很满意，于是我就借鉴一个样式，重新改了js实现，效果如下： 图片素材：(网上一搜就有=-=) pointer.png turntable.png turntable-bg.jpg 1.实现旋转 原理很简单，就是通过css动画来实现旋转动画，用js来控制旋转度， img[src^="turntable"] { posi
原生js 写一个随机抽奖
dreamimport的博客
02-03 479
要求：总共10个奖项，一等奖一个，二等奖2个，三等奖3个依次类推，抽中后，相应的奖项去除。
原生js实现抽奖小游戏
10-16
这篇教程主要讲解如何使用原生JavaScript实现一个简单的抽奖或随机点名小游戏。首先，我们来看游戏的基础HTML结构。游戏界面包含一个包裹元素`.wrapper`，其中有一个无序列表`.box`用于显示可选的奖品或名字，两个...
原生JS实现九宫格抽奖
10-14
原生JS实现九宫格抽奖，意味着我们需要使用JavaScript的基础知识点来创建这个抽奖效果，而不是依赖于任何第三方的JavaScript库，如jQuery或者其他前端框架。 首先，我们需要掌握HTML来构建九宫格抽奖的结构。通过...
原生JS实现九宫格抽奖效果
10-20
总结来说，这个原生JS实现的九宫格抽奖效果利用了JavaScript的DOM操作、事件监听、定时器以及随机数生成等技术，展示了动态效果和随机逻辑在网页交互中的应用。通过理解这段代码，开发者可以进一步提升自己的...
JavaScript 基于原生JS开发抽奖游戏demo
weixin_30426879的博客
04-13 94
JavaScript代码： window.onload = function () { var lis = document.getElementsByTagName('li'); var input = document.getElementById('reset'); var content ...
js抽奖系统
05-20
自己写的一个简单的js抽奖系统，能实抽取一等奖，二等奖，三等奖
JS实现简单的抽奖转盘效果示例
10-17
主要介绍了JS实现简单的抽奖转盘效果,涉及javascript数值计算与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
原生js实现的轮盘抽奖案例
m0_64642443的博客
09-10 1047
/ 定义定时器变量用来清除定时器// 转动次数// 转动时间间隔let times;// 总转动次数//计算切换总次数如果你跟我一样每天不知道吃啥，可以试试用这个轮盘来决定哦。好好吃饭，好好学习，祝天天开心。
原生JavaScript抽奖demo
qq_33741059的博客
03-05 277
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .divs { background-color: gray; position: absolute; t.
原生JavaScript随机抽奖案例
weixin_46920847的博客
01-27 1720
案例需求：抽奖机中有多个不同的奖项，点击按钮开始进行随机抽奖，默认所有的奖项得到的概率是一致的。 页面布局：大致布一下，可根据喜好进行调整。 <div> <div class="awards">特等奖</div> <div class="awards">一等奖</div> <div class="awards">二等奖</div> <div class="awards">三等奖</div>
【JavaScript】制作一个抽奖转盘页面
TA远方
11-08 9506
开发H5项目，有时会遇到一个需求，需要制作抽奖转盘的网页，这个实现步骤，如果拿现成的改来做是容易的，但是想着全靠自己做是不容易的，下面会讲，全靠自己做，能掌握到吗。
Three.js 实现年会3D抽奖页面(含源码)
最新发布
u012148903的博客
03-12 1311
先存下照片墙、球、散乱三种状态的坐标点，然后切换抽奖状态时，同时切换，通过tween切换照片的位置，这样就实现了动画。代码几年前写的，挺垃圾的，没考虑性能，也没有做啥优化。写之前的那段时间，刚好逛博客，看到别个大神写的threejs版《元素周期表》，这效果大体有点近似。高清的星空壁纸，太大了，如果是有点动效的gif，那体积更大。中奖时的音乐，一段布灵布灵的铃声。抽奖嘛，光效果是不够的，还得有点音乐才好。抽奖的照片，还得在照片球的中间，位置。这个时候的动画，主要是两个：照片切换、照片球的转动。
分享46个JS抽奖转盘，总有一款适合您
zy0412326的专栏
02-15 660
jQuery插件-实现HTML5微信红包抽奖红包雨特效动画js效果。HTML5 Canvas指针大转盘抽奖代码。jQuery大转盘抽奖填写联系方式代码。jQuery移动端抽奖大转盘页面代码。jquery-实现幸运抽奖机抽奖程序。jQuery随机抽中手机号码抽奖代码。jQuery绿色QQ音乐抽奖转盘代码。jQuery带中奖名单大转盘抽奖代码。jQuery手机端微信大转盘抽奖代码。Canvas自适应宽度大转盘抽奖代码。jQuery双11天猫拆红包抽奖代码。jquery九宫格图片大转盘抽奖代码。
JS实现2种常见的抽奖效果
weixin_44646763的博客
06-19 3094
JS实现2种常见的抽奖效果，转盘抽奖 和 宫格抽奖
threejs 抽奖动画
01-04
three.js是一种用于在网页上创建交互式3D图形的JavaScript库。它提供了强大的工具和功能，可以轻松地创建各种类型的动画效果，包括抽奖动画。 在使用three.js创建抽奖动画时，我们可以首先定义一个3D场景，然后添加一个或多个3D模型作为奖品。这些奖品可以是任何你想要的对象，如球体、立方体或者自定义模型。 接下来，我们可以使用three.js的动画功能来实现奖品的旋转和移动效果。通过对模型的位置、旋转和缩放进行逐帧更新，可以创建出流畅的动画效果。 为了实现抽奖的效果，我们可以在画面中添加一个按钮或者其他交互元素，当用户点击时触发抽奖过程。抽奖过程可以是随机的或者根据特定规则进行。当抽奖开始时，奖品开始旋转和移动，直到最终停止在一个特定的位置，表示中奖。 为了增加动画的趣味性，我们还可以添加一些特效，如粒子效果、光照效果或者烟雾效果等。这些特效可以通过three.js提供的材质和光源功能以及第三方库来实现。 最后，我们还可以通过three.js的相机和控制器来实现用户与动画的交互。用户可以通过鼠标或者触摸屏来旋转和缩放场景，以及点击控制按钮进行抽奖操作。 通过使用three.js，我们可以轻松地创建出生动、富有创意的抽奖动画，并且可以在各种类型的平台上运行，包括桌面、移动设备和虚拟现实设备等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值