原生JS实现抽奖

已于 2024-01-05 15:16:13 修改
阅读量542 收藏 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
版权

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
    评论
专栏目录
制作转盘
weixin_57762564的博客
05-18 953
制作转盘 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与技术：Axure RP8 作者：赵宜涛 撰写时间：2021/5/16 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 首先拉一个转盘的图片。如下 2、在利用矩形制作一个三角形和一个圆形。如下 3、把做好的矩形和三角形移动到图片
原生js实现抽奖小游戏
10-16
主要为大家详细介绍了原生js实现抽奖小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实现一个抽奖活动的布局
qq_62022086的博客
11-28 373
使用flex布局、百分比布局和媒体查询实现响应式布局，使用动画实现转动抽奖效果。
07_微信小程序之大转盘自定义组件编写
gzx的博客
11-22 4365
07_微信小程序之大转盘自定义组件编写 一.界面布局 通过传入的size控制圆盘大小 <!--components/turntable/index.wxml--> <view class="turntable" style="width:{{size}}rpx; height:{{size}}rpx;"> <image class="outer" src="../../images/outer.png"></image> <canvas clas
Js实现轮盘抽奖功能，一招帮你解决选择困难症_不知道吃啥抽奖
最新发布
2401_84253089的博客
04-12 561
含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
图解转盘抽奖布局样式，以小程序为例
自酌一杯酒
03-19 2340
目前抽奖最常见的两种：九宫格抽奖 和 转盘抽奖，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。分享我自己在自定义转盘抽奖的样式布局思路，只是样式布局，没有功能实现； 布局思路 整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局 一. 底部转盘背景图 1：用canvas画个转盘出来（我采用的这种，自定义更高），再转为临时路径或base64数据，放到底部背景图上； 2：用默认的转盘背景图，放到底部背景图上； 二. 奖品内容布局 首先需要
html js转盘抽奖,原生JS实现简易转盘抽奖
weixin_42515058的博客
06-16 496
turntable/**/body, table, tr, td {margin: 0;padding: 0;}.wrapper {position: relative;width: 300px;height: 300px;margin: 100px auto 0;text-align: center;}table {display: inline-block;}td, th {width: 10...
原生JS实现九宫格抽奖
10-14
主要为大家详细介绍了原生JS九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生JS实现九宫格抽奖效果
10-20
本篇文章主要介绍了原生JS实现九宫格抽奖效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
转盘抽奖js实现
kirsten_z的博客
07-19 1万+
效果：点击抽奖按钮，转盘开始旋转数圈后停止 示例： 抽奖html代码：<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="apple-touch-fullscreen" content="YES" /> <
微信转盘抽奖前端源码(一)：8个奖品，指针开始时指向缝隙
nocomment_84的博客
03-08 984
一 :  index.html&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;圆盘抽奖&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,in
移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo
热门推荐
FungLeo's Blog
03-17 1万+
移动换H5 の 纯CSS3实现大转盘抽奖布局 by FungLeo前言本教程不涉及JS控制旋转部分,也不涉及后端输出抽奖结果部分.这篇教程讲的是如何去实现大转盘抽奖的布局.在制作大转盘抽奖的时候,一般使用到的插件是jQueryRotate这款插件.网上有很多可以参考的教程.不再赘述.这篇博文的意义是,一般情况下,这些奖项它都是直接做到图片上去了.当然,这样也没有什么不行,只是如果要修改奖项的话,还需
Element UI动态生成多级表头
qq_42794545的博客
11-16 5567
层数是可变化的，所以需要专门设置一个表格的数据来保存表头，然后通过v-for="item in tableColData"的方式来循环展示表头，由于层数是循环展示表头的，所以如果层数里面如果有第二级别的表头，就需要在表头数据多设置一级children，加上第二层v-for="item1 in item.children"来遍历二级表头。由于项目的需求，需要根据用户自定义的方式来初始化表格的表头包含哪些信息，有很多信息是有规律的，所以我们需要Element UI动态生成多级表头。
CSS3制作3D爱心动画
qq_42794545的博客
11-27 1901
css，即层叠样式表的简称，是一种标记语言，有浏览器解释执行用来使页面变得更美观。
前端进阶之———浏览器调试巧技
qq_42794545的博客
08-25 1230
之前的经验是做一些简单的html，css样式调试以及他的报错信息，忽略了浏览器js调试的强大功能。觉得还是非常有必要的，很好的帮助我们以解决后开发的时候遇到复杂的问题，下面就开始系统的学习一下。
京东项目案例
qq_42794545的博客
07-14 1132
长时间没有写前端了，一上手就是一个京东项目，磨蹭了好几天。有了这次的基础下面的代码写出来会更快吧！ 下面是效果图 1 初始化文件 新建项目的基本文件夹，创建工作环境 新建首页文件index.html normalize.css的初始化文件拖到css文件夹中 对于浏览器的兼容性的问题有做初始化处理，以及其他的基本样式 2 头部实现 小图标 https://w...
JS函数调用的this指向与apply,call,bind调用模式
qq_42794545的博客
01-08 1026
的对象，如果没有这个参数或者参数为undefined或null，则默认指向全局Window。bind是返回绑定this之后的函数，而apply、call是立即执行。其中apply和call都是一次性传入参数，而。apply是数组，call、bind是列表。三者都是可以改变函数的this指向。bind的this指向是永久改变。apply，call则是临时绑定。传入的第一个参数绑定的对象。这篇文章去理解他们的应用。显式绑定this到obj。一个参数都是this指向。2、this指向例子（三者都是可以传递参数，
原生js实现路由守卫
09-17
原生JS实现路由守卫可以通过以下步骤实现： 1. 创建一个路由守卫函数，该函数将在每次路由跳转前执行。可以在该函数中进行登录状态的判断和权限验证。 2. 在路由跳转前，调用路由守卫函数。可以通过监听浏览器的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值