jQuery實(shí)現(xiàn)簡單的抽獎游戲

今天要寫的是，利用jQuery寫一個抽獎的案例，頁面包含四個組件，兩個按鈕分別是開始和停止的按鈕。兩個box，分別盛放人員和獎品。當(dāng)點(diǎn)擊開始按鈕時，人員不停地進(jìn)行切換。抽獎的box中顯示等待抽獎結(jié)果。當(dāng)按下停止按鈕時，兩個盒子分別顯示人員名，和所中的獎品。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供順河企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、成都做網(wǎng)站、H5網(wǎng)站設(shè)計、小程序制作等業(yè)務(wù)。10年已為順河眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

頁面的效果圖如下：

可能頁面沒有那么好看。我們主要實(shí)現(xiàn)的是功能

首先在body中定義組件

再進(jìn)行樣式設(shè)置：

css代碼：

接下來就是寫函數(shù)了。在這里我引用的是”http://libs.baidu.com/jquery/1.9.0/jquery.js“；的jQuery庫。

這個案例比較簡單，所以就不贅述了，下面附上最后的效果圖：

這個是點(diǎn)擊了開始按鈕之后，人員名進(jìn)行快速的切換中：

下面這個是點(diǎn)擊了停止按鈕的最終中獎人員和對應(yīng)的獎品

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。