开发者社区> 爱六六> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

幸运大抽奖

简介: 幸运大抽奖全新来袭,现在普遍的抽奖活动都是由flash开发的,然而,今天向大家展示由js实现的抽奖。早在2012年的时候写过一篇文章关于js抽奖的《javascript 抽奖》 。  借助raphaeljs插件实现,官网:http://raphaeljs.com          中文文档: http://lab.julying.com/raphael-js/docs/                                  幸运大抽奖已两种方式展现,一种是圆盘旋转(猎豹式),另一种是指针旋转(考拉式),实现抽奖三部曲。
+关注继续查看

幸运大抽奖全新来袭,现在普遍的抽奖活动都是由flash开发的,然而,今天向大家展示由js实现的抽奖。早在2012年的时候写过一篇文章关于js抽奖的《javascript 抽奖》 。  

借助raphaeljs插件实现,官网:http://raphaeljs.com          中文文档: http://lab.julying.com/raphael-js/docs/                                  

幸运大抽奖已两种方式展现,一种是圆盘旋转(猎豹式),另一种是指针旋转(考拉式),实现抽奖三部曲。

第一部:绘制圆盘和指针。

var r = Raphael("test",300,300);
// 绘制圆盘
r.image("pan.jpg",0,0,300,300);
// 绘制指针
r.image("pointer.png",145,0,10,150);

 

第二部:圆盘旋转(猎豹式)。

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+"奖");
    });
});

 


第三部:指针旋转(考拉式)。

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,搞定。

生活版:抽奖圆盘式先加速中急速后减速的效果。感兴趣的朋友可以改进以上的代码,用到实际项目中。




DEMO:

<!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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
唉,被坑惨了!
32 位系统,用户态的虚拟空间只有 3G,如果创建线程时分配的栈空间是 10M,那么一个进程最多只能创建 300 个左右的线程。 64 位系统,用户态的虚拟空间大到有 128T,理论上不会受虚拟内存大小的限制,而会受系统的参数或性能限制。
0 0
抽奖活动的高可用、高并发优化
这几年工作中做过不少营销活动,这里以抽奖活动为例,讨论一下如何设计出一个高可用、高并发的营销系统。 高可用、高并发架构的核心是分流和限流。系统架构时,应根据每一种营销活动的场景与特性,制定不同的分流、限流方案。
15441 0
【C/C++学院】(16)QT版:幸运大抽奖
<p><span style="color:rgb(90,90,90); font-family:'microsoft yahei'; font-size:18px; line-height:29.700000762939453px; white-space:pre-wrap">程序效果:</span></p> <p><span style="color:rgb(90,90,90); f
851 0
+关注
爱六六
前端开发相关专家
文章
问答
文章排行榜
最热
最新
相关电子书
更多
阿里云技术面试红宝书
立即下载
阿里云技术面试红宝书
立即下载
用心聆听,服务见智
立即下载