JS+CSS寫的類似轉盤的抽獎程序

jopen 11年前發布 | 20K 次閱讀 CSS JavaScript開發

精簡版類似轉盤的抽獎程序。這是簡單0-8個獎品頁面，0-8即每個獎品，改的時候只需要自己把他們換成不同的樣式就OK了。

    <html>  
        <head>  
            <style type="text/css">  
                .cur{color:red;font-weight:700;font-size:30px;}<!--選中狀態-->  
            </style>  
        </head>  
        <body>  
            <span onclick="getAward();">go</span><!--點擊開始抽獎-->  
            <span onclick="stopAward();">stop</span><br/><!--點擊停止抽獎-->        
            <span id="a0" class="cur">0</span><br/>  
            <span id="a1">1</span><br/>  
            <span id="a2">2</span><br/>  
            <span id="a3">3</span><br/>  
            <span id="a4">4</span><br/>  
            <span id="a5">5</span><br/>  
            <span id="a6">6</span><br/>  
            <span id="a7">7</span><br/>  
            <span id="a8">8</span><br/>  
        </body>  
        <script src="jquery-1.6.3.min.js"></script>  
        <script src="award.js"></script>  
    </html>

一下是award.js文件

    <script type="text/javascript">

    var start = 0;

    //第一個獎品代號0

    var end = 8;

    //最后一個獎品代后是8

    var cur = 0;

    //當前被選中（高亮）的獎品

    var distance = 0;

    //從后臺得到中獎代后滾動過的格數

    var time = 300;

    //沒0.3秒轉盤滾動一格

    var go;

    //聲明用來讓轉盤滾動的定時器

    var stop = -1;

    //應該停下來的獎品代碼，默認為-1，即開始無獎品



var getAward = function() {  
    clearInterval(go);  
        //清除定時器，防止多次開始按鈕造成混亂  
    go = setInterval("change()", time);  
    //每隔time毫秒換一個格子  
};  

var change = function() {  
    if(stop == cur && distance > 5) {  
        //判斷中獎代后與當前是否一致，且滾動格數是否大于5步（為了讓轉盤多滾動幾下，避免馬上停下）  
        showAward(stop);  
        //如果中獎，則提示用戶，停止抽獎程序  
        return;  
    }  
    $("#a"+cur).removeClass("cur");  
    //把當前獎品設置為常態  
    if(cur == 8) {  
        $("#a"+start).addClass("cur");  
        //把第一個獎品設置為高亮cur=0;//讓cur指向第一個獎品  
    }else {   
        $("#a"+(cur+1)).addClass("cur");  
        //把下一個獎品設置為高亮  
        cur++;  
        //讓cur指向下一個獎品  
    }   
    (stop >= 0) && (time = time+100);  
    //如果stop>=0，即受到中獎信息后，把定時器時間加長，目的是讓轉盤越轉越慢  
    (stop >= 0) && distance++;  
    //中獎后，每滾動一次給distance加1，可以讓轉盤多滾幾下，不至于馬上停止  
    clearInterval(go);   
    getAward();  
};  
var stopAward = function(award) {  
    //后臺獲取中獎代號award  
    stop = award;  
    //把中獎信息傳遞給stop  
}var showAward = function(award) {  
    alert(award);  
    //提示用戶的獎項  
    clearInterval(go);  
    //清除定時器  
}  
</script>  </pre> <p></p>



來自：http://blog.csdn.net/iammaking/article/details/17287697
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！