案例总结【抽奖功能实现】

在此记录一些小的功能demo实现过程的记录。**这些demo都是根据网上收集或者自己突发奇想实现的功能。 前天实现了一个简单的抽奖功能，今天来复个盘。 image 这个功能很简单，就是点击之后，轮盘旋转，旋转停止弹出抽奖结果。我从两个角度重新写了一遍，一个是面向过程的方法，一步一步实现，这种偏向正常人的思维。再一个实现方法是面向对象的方法，这个对我来说也是比较新鲜的，以前虽然听过，但很少实操过。 第一个面向过程编程的方式中，对于我来说重点有以下几个： 点击让轮盘随机旋转，旋转几圈，角度怎么随机？ 旋转通过什么实现？ 如何判断轮盘停止之后获得什么奖项？ 实现过程： 第一个问题通过Math.random()来实现; 第二个问题通过css3的旋转属性实现； 第三个问题通过if else判断旋转角度即可，再通过函数封装一下就好了； var deg = Math.random() * 360; 难点： 点击多次就有问题，自己知道要等旋转结束才能再点击 什么时候判断旋转结束 如果别人点击多次如何避免出现问题 解决： 通过一个监听事件WebkitTransitionEnd监听轮盘旋转结束，这个都忘记好久了。 通过给程序加锁，可以避免多次点击多次产生执行事件，导致错误。也就是在锁开的点击就生效，点击事件执行，然后锁立马关上，等到监听事件监听到轮盘旋转结束，再打开锁。 最后还有一个问题，就是第二次点击，轮盘不会旋转设置好的8圈，而是转一圈以内的角度。这个问题在于，第一次旋转结束的状态角度跟第二次随机生成的状态角度相差不过360度，比如：第一次随机旋转8圈+45度 停止，第二次随机了一个8圈+90度，那么两次的度数相差45度，对于旋转属性来说，第二次变换只想对于上一次的状态变化，所以并不会旋转8圈，而是转45度。 所以在每次旋转结束，都要隐式的把轮盘的状态归零。 ele.style.transform = `rotate(${deg}deg)`; 用面向对象的方法实现有几点要记录的： 整体思路： 轮盘对象 按钮对象 轮盘有监听旋转停止功能 轮盘有旋转的功能 轮盘有奖项属性，并且有判断奖项的功能 轮盘有初始角度 轮盘有旋转结束的时间点 按钮有被点击的功能 按钮点击有生成旋转角度的功能 按钮有控制轮盘是否符合旋转要求的能力(判断轮盘是否旋转结束) 在实现过程中，除了有些地方需要记录this，写法上跟面向过程有些不一样，其他的功能都跟面向过程实现方法一致。只是要多熟悉一下这种感觉，不过确实挺好。 最后通过一个立即执行函数封闭一下作用域，不让外界影响程序。并立即执行函数中传递了window，绑定了一个对象，把它暴露出去，这个对象是外界定制轮盘旋转多少圈的，如果需要也可以定制一些其他功能需求。 image

本文章由javascript技术分享原创和收集