1、效果展示
0. 制作一个MiniSize使用提供的素材实现一个转盘活动的布局（如下图所示）；
- 进入界面后2秒钟后开始旋转，5秒钟后停止旋转；
- 并且3秒后进入一个表单界面（如下图2所示）；
- 界面要求适配现主流的手机屏幕及手机浏览器；
- 要求界面切换连贯，动画流畅。
- 请保证视觉效果的还原度以及代码整洁度。
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 秒开始旋转5sawait 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>
