今天想写的是用jQuery写一个抽奖案例。该页面包含四个组件，两个按钮是开始和停止按钮。工作人员和奖品各两个盒子。当点击开始按钮时，人员继续切换。等待抽奖结果显示在抽奖箱中。当按下停止按钮时，两个框显示该人的姓名和框中的奖品。

页面呈现如下：

也许这一页没那么好看。我们主要实现的是功能

首先，定义主体中的组件

正文输入类型=' button' class=' BTN' id=' start '值=' start '输入类型=' button' class=' BTN' id=' stop '值=' stop ' div id=' number ' class=Box1 '/div div id=' jiangpin ' class=' Box2 '/div/正文，然后设置样式：

Css代码：

style type=' text/CSS ' * { margin : 0px；padding: 0px} .btn { width: 90px高度： 40px；背景-颜色：浅绿色；color:白色；font-size : 18px；Font-family: '微软雅黑'；文本对齐：中心；线高： 40px；} .box1 { position: absolute宽度： 230 px；高度： 100像素；margin: 10px 50pxtop:150px左： 60%；背景-颜色：金色；color:黑色；边界半径：8%；font-size : 30px；文本对齐：中心；线高： 100 px；} .box2 { position: absolute宽度： 230 px；高度： 100像素；margin: 10px 50pxtop: 300px左： 60%；背景-颜色：金色；color:黑色；边界半径：8%；font-size : 30px；文本对齐：中心；线高： 100 px；} /style下一步是写函数。这里我引用“http://libs . Baidu.com/jquery/1 . 9 . 0/jquery . js”；的jQuery库。

脚本$(文档)。ready (function () {//1。首先定义两个数组，存储人员和奖品var list1=['A君'，' B君'，' C君'，' D君'，' E君'，' F君'，' G君']；Varlist2=['ysl '，' iphone7 '，' iphone6 '，' watch '，'小红花'，'感谢参与'，'感谢参与']；//2.为开始按钮绑定click事件$(“# start”)。点击(函数(){//2.1初始化奖框$(' #江品')的内容。html('等待抽奖.');//2.2使用setInterval()函数切换人员姓名//定义一个变量，在每次functionid=setInterval(function(){ var n=math)时接受其状态。地板(数学。random () * list1。长度)；$('#number ')。html(list 1[n])；},30);});//3.为停止按钮绑定click事件$(“# stop”)。单击(函数(){//3.1清除设置间隔()。并在最后一个人名上停止clearInterval(functionId)；//3.2随机生成奖品数组的下标，将下标对应的元素写入奖品区域varjiang=math . floor(math . random()* list 2 . length)；$('#jiangpin ')。html(list 2[Jiang])；});})/脚本这个案例比较简单，就不赘述了。最终效果图附后：

这是在点击开始按钮后，人员姓名被快速切换：

以下是点击停止按钮的最终获胜者和相应的奖品

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。