// JavaScript Document var turnplate={ restaraunts:[], //大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 //fontcolors:[], //大转盘奖品区块对应文字颜色 outsideRadius:222, //大转盘外圆的半径 textRadius:165, //大转盘奖品位置距离圆心的距离 insideRadius:65, //大转盘内圆的半径 startAngle:0, //开始角度 bRotate:false //false:停止;ture:旋转 }; var Mar = document.getElementById("Marquee"); var child_div=Mar.getElementsByTagName("div") var picH = 35;//移动高度 var scrollstep=3;//移动步幅,越大越快 var scrolltime=50;//移动频度(毫秒)越大越慢 var stoptime=3000;//间断时间(毫秒) var tmpH = 0; Mar.innerHTML += Mar.innerHTML; function start(){ if(tmpH < picH){ tmpH += scrollstep; if(tmpH > picH )tmpH = picH ; Mar.scrollTop = tmpH; setTimeout(start,scrolltime); }else{ tmpH = 0; Mar.appendChild(child_div[0]); Mar.scrollTop = 0; setTimeout(start,stoptime); } } $(document).ready(function(){ setTimeout(start,stoptime); //动态添加大转盘的奖品与奖品区域背景颜色 var num=location.hash;//根据接收过来的值判断概率。 // alert(num.substr(1)); //turnplate.fontcolors = ["#CB0030", "#FFFFFF", "#CB0030", "#FFFFFF","#CB0030", "#FFFFFF"]; var rotateTimeOut = function (){ $('#wheelcanvas').rotate({ angle:0, animateTo:2160, duration:6000, callback:function (){ alert('网络超时,请检查您的网络设置!'); } }); }; //旋转转盘 item:奖品位置; txt:提示语; var rotateFn = function (item, txt,data){ 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:6000, callback:function (){ //中奖页面与谢谢参与页面弹窗 if(txt.indexOf("谢谢参与")>=0){ $(".xxcy_text").html(data); $("#xxcy-main").fadeIn(); save(); }else{ $("#zj-main").fadeIn(); var resultTxt=txt.replace(/[\r\n]/g,"");//去掉回车换行 $("#jiangpin").text(data); save(); } turnplate.bRotate = !turnplate.bRotate; } }); }; /********弹窗页面控制**********/ $('.close_zj').click(function(){ window.location.reload(); $('#zj-main').fadeOut(); $('#tx-main').fadeIn();//提醒框显示 //判断用户是否确认放弃 $(".do").click(function(){//点确认就默认放弃 $('#tx-main').fadeOut(); theEnd(); save(); }); $(".not_do").click(function(){//点取消就回到提交页面 $('#tx-main').fadeOut(); $('#zj-main').fadeIn(); }); $('#ml-main').fadeIn(); }); $('.close_xxcy').click(function(){ $('#xxcy-main').fadeOut(); window.location.reload(); // theEnd(); // save(); }); /********抽奖开始**********/ $('#tupBtn').click(function (){ if(turnplate.bRotate)return; turnplate.bRotate = !turnplate.bRotate; var item = rnd(turnplate.randomRate); // console.log(item); if(item == 0){ item = 6; } // var data = turnplate.restaraunts[item-1]; // rotateFn(item, turnplate.restaraunts[item-1],data); // return ; $.ajax({ type:"POST", url:"/index/index/prize_start", data: {item:item}, dataType:"json", success : function(result){ // console.log(result); // return; if(result['code'] == 1){ //奖品数量等于6,指针落在对应奖品区域的中心角度 rotateFn(item, turnplate.restaraunts[item-1], result['info']); // var html='
'+result['content']+'
'; // $("#Marquee").prepend(html); } else if(result['code'] == 2){ msg(result['info'],2,"/index/login"); } else{ msg(result['info'],1); } }, error:function(){ msg("网络繁忙,请刷新后再试!",1); } // success:function(data){ // console.log(data); // if(data.state){ // //获取随机数(奖品个数范围内) // var item = data.index; // //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] // rotateFn(item, turnplate.restaraunts[item-1],data); // }else{ // if(data.msg == '请先登录'){ // location.href='/user-login'; // } // $(".xxcy_text").html(data.msg); // $("#xxcy-main").fadeIn(); // return; // } // }, // error:function(data){ // console.log("error:"+data); // return; // } }); }) }); function rnd(rate){ var random = Math.floor(Math.random() * 100); var myRandom = []; var randomList = []; var randomParent = []; for(var i = 0; i < 100; i++){ myRandom.push(parseInt([i]) + 1); } for(var i = 0; i < rate.length; i++){ var temp = []; var start = 0; var end = 0; randomList.push(parseInt(rate[i].split('%')[0])); for(var j = 0; j < randomList.length; j++){ start += randomList[j-1] || 0 end += randomList[j] } temp = myRandom.slice(start, end); randomParent.push(temp) } for(var i = 0; i < randomParent.length; i++){ if($.inArray(random, randomParent[i]) > 0){ return(i+1) } } } // 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,516,516); //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式 ctx.strokeStyle = "#FFBE04"; //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = 'bold 22px 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(258, 258, turnplate.outsideRadius, angle, angle + arc, false); ctx.arc(258, 258, turnplate.insideRadius, angle + arc, angle, true); ctx.stroke(); ctx.fill(); //锁画布(为了保存之前的画布状态) ctx.save(); //----绘制奖品开始---- ctx.fillStyle = "#E83800"; //ctx.fillStyle = turnplate.fontcolors[i]; var text = turnplate.restaraunts[i]; var line_height = 30; //translate方法重新映射画布上的 (0,0) 位置 ctx.translate(258 + Math.cos(angle + arc / 2) * turnplate.textRadius, 258 + Math.sin(angle + arc / 2) * turnplate.textRadius); //rotate方法旋转当前的绘图 ctx.rotate(angle + arc / 2 + Math.PI / 2); /** 下面代码根据奖品类型、奖品名称长度渲染不同效果,如字体、颜色、图片效果。(具体根据实际情况改变) **/ if(text.indexOf("\n")>0){//换行 var texts = text.split("\n"); for(var j = 0; j 0){ //ctx.font = j == 0?'20px Microsoft YaHei':'20px Microsoft YaHei'; } //ctx.fillStyle = j == 0?'#FFFFFF':'#FFFFFF'; if(j == 0){ //ctx.fillText(texts[j]+"M", -ctx.measureText(texts[j]+"M").width / 2, j * line_height); ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); }else{ ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height); } } }else if(text.indexOf("\n") == -1 && text.length>6){//奖品名称长度超过一定范围 text = text.substring(0,6)+"||"+text.substring(6); var texts = text.split("||"); for(var j = 0; j