原生JS实现抽奖

发布时间：2024年01月05日

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>

文章来源:https://blog.csdn.net/qq_42794545/article/details/135397672
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章