幸運大抽獎

時間 2019-11-06

標籤幸運抽獎简体版

原文原文鏈接

幸運大抽獎全新來襲，如今廣泛的抽獎活動都是由flash開發的，然而，今天向你們展現由js實現的抽獎。早在2012年的時候寫過一篇文章關於js抽獎的《javascript 抽獎》。

藉助raphaeljs插件實現，官網：http://raphaeljs.com 中文文檔： http://lab.julying.com/raphael-js/docs/

幸運大抽獎已兩種方式展示，一種是圓盤旋轉（獵豹式），另外一種是指針旋轉（考拉式），實現抽獎三部曲。

第一部：繪製圓盤和指針。javascript

var r = Raphael("test",300,300);
// 繪製圓盤
r.image("pan.jpg",0,0,300,300);
// 繪製指針
r.image("pointer.png",145,0,10,150);

第二部：圓盤旋轉（獵豹式）。html

btn.click(function(){
    // 清空中獎結果
    result.html("");  
    // 清空畫布
    r.clear();
    // 從新繪製圓盤和指針
    pan = r.image(pic,0,0,300,300);
    r.image(pointer,145,0,10,150);
    // 選中角度
    var angle = -parseInt(Math.random()*3000+6000);
    // 中獎結果
    var tmp = Math.abs(parseInt(((angle-30)%360)/60))+1;
    pan.animate({transform: "r" + angle}, 1000, ">",function(){
         result.html("恭喜您得到"+tmp+"獎");
    });
});

第三部：指針旋轉（考拉式）。java

btn.click(function(){
    // 清空中獎結果
    result.html("");
    // 設置暫停、計數、角度、中獎結果
    var stop=null,
        index = 0,
        angle= parseInt(Math.random()*360),
        tmp =Math.abs(parseInt(((angle+30)%360)/60))+1;
    // 清空畫布，從新繪製圓盤和指針
    r.clear();
    r.image(pic,0,0,300,300);
    point = r.image(pointer,145,0,10,150);
    // 中獎結果
    stop = setInterval(function(){
        index++;
        if(index>=angle){
            clearInterval(stop); 
            result.html("恭喜您得到"+tmp+"獎");
        }
        point.rotate(1,150,150);  
    },100);
});

用到raphaeljs中五個方法有image、animate、transform、rotate、clear，搞定。

生活版：抽獎圓盤式先加速中急速後減速的效果。感興趣的朋友能夠改進以上的代碼，用到實際項目中。jquery

DEMO：dom

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>幸運大抽獎</title> <style> *{margin: 0;padding: 0;} .main{width:960px; margin: 0px auto;} .main .title{color: #f00; font-size: 50px;font-weight:bold;text-align: center; text-shadow: 3px 1px 6px #f60; padding: 30px 0px;} .main .block{overflow: hidden;} .main .blockLt{float: left;width:480px; text-align: center;} .main .blockBtn{} .main .blockBtn input{width: 100px; height: 30px; line-height: 30px; font-size: 16px; cursor: pointer;} .main .blockBtn p{margin: 20px auto 0px;} .main .blockPan{width: 300px; height: 300px; margin: 10px auto; overflow: hidden;} .main .blockRes{} </style> </head> <body> <div class="main"> <div class="title">幸運大抽獎</div> <div class="block"> <div class="blockLt"> <div class="blockBtn"> <input id="btnOne" type="button" value="抽獎"> <p>================圓盤轉動(獵豹式)================</p> </div> <div id="testOne" class="blockPan"></div> <div id="resultOne" class="blockRes"></div> </div> <div class="blockLt"> <div class="blockBtn"> <input id="btnTwo" type="button" value="抽獎"> <p>================指針轉動(考拉式)================</p> </div> <div id="testTwo" class="blockPan"></div> <div id="resultTwo" class="blockRes"></div> </div> </div> </div> <script src="http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script> <script src="http://files.cnblogs.com/kuikui/raphael.js"></script> <script> $(function(){ var btnOne = $("#btnOne"), btnTwo = $("#btnTwo"), resultOne = $("#resultOne"), resultTwo = $("#resultTwo"), pic = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pan.jpg", pointer = "http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pointer.png"; var rOne = Raphael("testOne",300,300); var panOne = rOne.image(pic,0,0,300,300); rOne.image(pointer,145,0,10,150); btnOne.click(function(){ resultOne.html(""); rOne.clear(); panOne = rOne.image(pic,0,0,300,300); rOne.image(pointer,145,0,10,150); var angle = -parseInt(Math.random()*3000+6000); var tmp = Math.abs(parseInt(((angle-30)%360)/60))+1; panOne.animate({transform: "r" + angle}, 1000, ">",function(){ resultOne.html("恭喜您得到"+tmp+"獎"); }); }); var rTwo = Raphael("testTwo",300,300); rTwo.image(pic,0,0,300,300); var point = rTwo.image(pointer,145,0,10,150); point.rotate(0,150,150); btnTwo.click(function(){ resultTwo.html(""); var stop=null, index = 0, angle= parseInt(Math.random()*360), tmp =Math.abs(parseInt(((angle+30)%360)/60))+1; rTwo.image(pic,0,0,300,300); point = rTwo.image(pointer,145,0,10,150); stop = setInterval(function(){ index++; if(index>=angle){ clearInterval(stop); resultTwo.html("恭喜您得到"+tmp+"獎"); } point.rotate(1,150,150); },100); }); }); </script> </body> </html>ui

spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。