Js抽奖代码，转盘抽奖_转盘抽奖js源码资源-CSDN文库

共9个文件

png：4个

js：2个

html：1个

需积分: 44 119 浏览量 2016-04-28 07:30:06 上传评论收藏 93KB ZIP 举报

JavaScript（简称JS）是一种轻量级的解释型编程语言，常用于网页和网络应用开发，包括用户交互、动画效果以及与服务器的通信等。在这个场景中，"Js抽奖代码，转盘抽奖" 提供了一个利用JavaScript实现的转盘抽奖功能。转盘抽奖是一种常见的互动方式，常见于线上活动或游戏中，通过模拟旋转盘面，用户点击后随机选择一个奖项。我们需要理解转盘抽奖的基本逻辑。在JS中，这个过程通常涉及以下几个关键部分： 1. **界面设计**：使用HTML和CSS构建转盘的视觉元素，包括转盘背景、指针、奖项区域等。这可以通过CSS的边框、渐变和旋转属性来实现动态效果。 2. **数据结构**：定义奖项列表，每个奖项可能对应不同的概率。这些数据可以存储为数组，便于后续处理。 3. **随机数生成**：使用JavaScript的`Math.random()`函数生成0到1之间的随机数，然后通过一定的算法映射到具体奖项。为了确保公平性，需要确保每个奖项有相匹配的概率。 4. **动画效果**：使用`requestAnimationFrame`或者CSS3的`transition`属性来创建平滑的旋转动画。当用户触发抽奖后，转盘开始旋转，然后逐渐减速至停止在某个奖项上。 5. **事件监听**：设置点击事件监听器，当用户点击开始按钮时启动抽奖过程。同时，可能还需要监听停止按钮，以便在需要时提前结束旋转。 6. **结果反馈**：当转盘停止后，显示中奖结果，可以是弹窗提示，也可以是更新UI显示中奖的奖项。在提供的"js抽奖源码"文件中，你可以看到上述各部分的具体实现。代码通常会包含一个主函数来控制整个流程，以及多个辅助函数来处理细节，如计算旋转角度、动画执行、结果判定等。分析和理解这些源码可以帮助你了解如何将类似功能应用到自己的项目中。在实际应用中，还可以考虑一些高级特性，比如优化动画性能、增加防作弊机制、支持多轮抽奖、实现动态概率调整等。此外，为了适应不同场景，你可能需要对代码进行一定程度的定制，比如更换UI样式，或者根据业务需求调整奖项设置。 JS转盘抽奖的实现是一个结合了前端技术、随机数生成和动画原理的综合实践，对于提升JavaScript编程技能和理解动态效果的实现具有很好的学习价值。通过研究和修改这个源码，你可以更好地掌握JavaScript在互动式Web应用中的运用。

资源推荐

资源详情

资源评论

收起资源包目录

js抽奖源码.zip （9个子文件）

js抽奖源码

style.css.bak 692B

index.html 8KB

images

turnplate-pointer.png 3KB

turnplate-bg.png 5KB

1.png 498B

2.png 754B

awardRotate.js 11KB

jquery-1.10.2.js 267KB

style.css 692B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5抽奖大转盘特效代码 - JS代码网</title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/jquery-1.10.2.js"></script> <script type="text/javascript" src="js/awardRotate.js"></script> <script type="text/javascript"> var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:192, //大转盘外圆的半径 textRadius:155, //大转盘奖品位置距离圆心的距离 insideRadius:68, //大转盘内圆的半径 startAngle:0, //开始角度 bRotate:false //false:停止;ture:旋转 }; $(document).ready(function(){ //动态添加大转盘的奖品与奖品区域背景颜色 turnplate.restaraunts = ["50M免费流量包", "10闪币", "谢谢参与", "5闪币", "10M免费流量包", "20M免费流量包", "20闪币 ", "30M免费流量包", "100M免费流量包", "2闪币"]; turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; var rotateTimeOut = function (){ $('#wheelcanvas').rotate({ angle:0, animateTo:2160, duration:8000, callback:function (){ alert('网络超时，请检查您的网络设置！'); } }); }; //旋转转盘 item:奖品位置; txt：提示语; var rotateFn = function (item, txt){ var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); if(angles<270){ angles = 270 - angles; }else{ angles = 360 - angles + 270; } $('#wheelcanvas').stopRotate(); $('#wheelcanvas').rotate({ angle:0, animateTo:angles+1800, duration:8000, callback:function (){ alert(txt); turnplate.bRotate = !turnplate.bRotate; } }); }; $('.pointer').click(function (){ if(turnplate.bRotate)return; turnplate.bRotate = !turnplate.bRotate; //获取随机数(奖品个数范围内) var item = rnd(1,turnplate.restaraunts.length); //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] rotateFn(item, turnplate.restaraunts[item-1]); /* switch (item) { case 1: rotateFn(252, turnplate.restaraunts[0]); break; case 2: rotateFn(216, turnplate.restaraunts[1]); break; case 3: rotateFn(180, turnplate.restaraunts[2]); break; case 4: rotateFn(144, turnplate.restaraunts[3]); break; case 5: rotateFn(108, turnplate.restaraunts[4]); break; case 6: rotateFn(72, turnplate.restaraunts[5]); break; case 7: rotateFn(36, turnplate.restaraunts[6]); break; case 8: rotateFn(360, turnplate.restaraunts[7]); break; case 9: rotateFn(324, turnplate.restaraunts[8]); break; case 10: rotateFn(288, turnplate.restaraunts[9]); break; } */ console.log(item); }); }); function rnd(n, m){ var random = Math.floor(Math.random()*(m-n+1)+n); return random; } //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染 window.onload=function(){ drawRouletteWheel(); }; function drawRouletteWheel() { var canvas = document.getElementById("wheelcanvas"); if (canvas.getContext) { //根据奖品个数计算圆周角度 var arc = Math.PI / (turnplate.restaraunts.length/2); var ctx = canvas.getContext("2d"); //在给定矩形内清空一个矩形 ctx.clearRect(0,0,422,422); //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式 ctx.strokeStyle = "#FFBE04"; //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = '16px Microsoft YaHei'; for(var i = 0; i < turnplate.restaraunts.length; i++) { var angle = turnplate.startAngle + i * arc; ctx.fillStyle = turnplate.colors[i]; ctx.beginPath(); //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆） ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false); ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true); ctx.stroke(); ctx.fill(); //锁画布(为了保存之前的画布状态) ctx.save(); //----绘制奖品开始---- ctx.fillStyle = "#E5302F"; var text = turnplate.restaraunts[i]; var line_height = 17; //translate方法重新映射画布上的 (0,0) 位置 ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius); //rotate方法旋转当前的绘图 ctx.rotate(angle + arc / 2 + Math.PI / 2); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/ if(text.indexOf("M")>0){//流量包 var texts = text.split("M"); for(var j = 0; j<texts.length; j++){ ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei'; if(j == 0){ ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height); }else{ ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); } } }else if(text.indexOf("M") == -1 && text.length>6){//奖品名称长度超过一定范围 text = text.substring(0,6)+"||"+text.substring(6); var texts = text.split("||"); for(var j = 0; j<texts.length; j++){ ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); } }else{ //在画布上绘制填色的文本。文本的默认颜色是黑色 //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度 ctx.fillText(text, -ctx.measureText(text).width / 2, 0); } //添加对应图标 if(text.indexOf("闪币")>0){ var img= document.getElementById("shan-img"); img.onload=function(){ ctx.drawImage(img,-15,10); }; ctx.drawImage(img,-15,10); }else if(text.indexOf("谢谢参与")>=0){ var img= document.getElementById("sorry-img"); img.onload=function(){ ctx.drawImage(img,-15,10); }; ctx.drawImage(img,-15,10); } //把当前画布返回（调整）到上一个save()状态之前 ctx.restore(); //----绘制奖品结束---- } } } </script> </head> <body style="background:#e62d2d;overflow-x:hidden;"> <img src="images/1.png" id="shan-img" style="display:none;" /> <img src="images/2.png" id="sorry-img" style="display:none;" /> <div class="banner"> <div class="turnplate" style="background-image:url(images/turnplate-bg.png);background-size:100% 100%;"> <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> <img class="pointer" src="images/turnplate-pointer.png"/> </div> </div> <div style="display:none"> <script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F6f798e51a1cd93937ee8293eece39b1a' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_5718743'%3E%3C/span%3E%3Cscript src='" + cn

评论收藏

内容反馈