年会小抽奖活动必备，JS与css3给你带来抽奖的小效果，请笑纳

年终到了，年会少不了。这时候的你是不是很期待年终奖，是不是更期待年会上的抽奖活动呢？这么热闹的气氛怎么能少了抽奖活动的小插曲呢？余话不多说，我们来看看css、js是如何给我们带来抽奖的效果呢？因本人才疏学浅，现不会利用原生js来实现抽奖的效果，还望大神多多指教。

先来布局好抽奖的转盘吧，HTML代码不多，css的样式不复杂，为了实现层叠而使用position定位，让元素脱离文档流，达到自己想编辑的效果。

在截图中我们看到，布局是非常的简单，用了无序列表标签制作扇形，div制作圆心，span标签做指针，扇形的li标签每一个都给不同的旋转度数、背景颜色以及定位，使它在圆中形成一个扇形。盒子本为矩形，用border-radius改变盒子的样式，增加了圆角的效果。
布局效果，见截图：

通过js代码来控制它运动，从而达到自己中奖的效果?。根据我现在所接触的Js中常见的几种事件：onclick当用户点击某个对象时调用的事件句柄（单击事件）。ondbclick当用户双击某个对象时调用的事件句柄（双击事件）。onload一张页面或一幅图像完成加载（页面加载事件）。onmousedown 鼠标按钮被按下（按下）。 onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseup鼠标按键被松开（弹起）。onblur 元素失去焦点。onfocus 元素获得焦点。

下截图中js代码较少，但是作用大。在图中通过获取元素的id，找到元素，在div上添加类的另一中方法：div.classList.add(“transfer fs”);同一效果可以通过不同的代码实现，代码的世界很丰富。

这是点击抽奖时在控制台输出，为你打气加油的一句祝福语，以及鼠标移出抽奖区域的中奖提示。

通过一小小的例子就足矣看出自己的不足在很多方面，还须再努力学习更多，代码世界充满了绚丽与精髓的根源。