原生JS实现抽奖

1、效果展示 

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

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

原生JS实现抽奖_第1张图片原生JS实现抽奖_第2张图片

2、实现思路

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

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

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

3、参考代码

  • 方案一



  
  
  
  转盘活动
  
  
  
  
  • 方案二


  
  
  
  转盘活动
  
  
  
  

你可能感兴趣的:(HTML5,CSS,javascript,css,前端)