本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码,可以多次抽奖,被抽中的号码将不会被再次抽中。抽奖流程:点击“开始”按钮后,程序获取号码信息,滚动显示号码,当点击“停止”按钮后,号码停止滚动,这时显示的号码即为中奖号码,可以点击“开始”按钮继续抽奖。
HTML
上述代码中,我们需要一个#roll用来显示滚动号码,#mid是用来记录抽中的号码id,然后就是需要两个按钮分别用来“开始”和“停止”动作,最后还需要一个#result显示抽奖结果。
CSS
我们使用简单的css来修饰html页面。
.demo{width:300px; margin:60px auto; text-align:center}
#roll{height:32px; line-height:32px; font-size:24px; color:#f30}
.btn{width:80px; height:26px; line-height:26px; background:url(btn_bg.gif)
repeat-x; border:1px solid #d3d3d3; cursor:pointer}
#stop{display:none}
#result{margin-top:20px; line-height:24px; font-size:16px; text-align:center}
注意,我们默认将按钮#stop设置为display:none,是为了一开始只显示“开始”按钮,点击“开始”后,抽奖进行中,将显示“停止”按钮。
jQuery
我们首先要实现的是点击“开始”按钮,通过ajax从后台获取抽奖用