From a98fb4ce5d3f1cf1d481d7a6991992b4cb687621 Mon Sep 17 00:00:00 2001 From: chenjingyu Date: Mon, 28 Sep 2020 15:56:34 +0800 Subject: [PATCH] =?UTF-8?q?[=E8=BD=AC=E7=9B=98]=E5=AE=9E=E7=8E=B0=E5=9F=BA?= =?UTF-8?q?=E6=9C=AC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/ui/luck-draw/luck-draw.component.html | 88 +++-- src/app/ui/luck-draw/luck-draw.component.scss | 195 ++++------ src/app/ui/luck-draw/luck-draw.component.ts | 56 ++- src/assets/images/1.png | Bin 0 -> 498 bytes src/assets/images/2.png | Bin 0 -> 754 bytes src/assets/images/turnplate-bg.png | Bin 0 -> 4720 bytes src/assets/images/turnplate-pointer.png | Bin 0 -> 4611 bytes src/assets/images/zhuan.gif | Bin 0 -> 12154 bytes src/assets/js/awardRotate.js | 305 +++++++++++++++ src/assets/js/zhuanpan.js | 354 ++++++++++++++++++ src/index.html | 16 +- 11 files changed, 839 insertions(+), 175 deletions(-) create mode 100644 src/assets/images/1.png create mode 100644 src/assets/images/2.png create mode 100644 src/assets/images/turnplate-bg.png create mode 100644 src/assets/images/turnplate-pointer.png create mode 100644 src/assets/images/zhuan.gif create mode 100644 src/assets/js/awardRotate.js create mode 100644 src/assets/js/zhuanpan.js diff --git a/src/app/ui/luck-draw/luck-draw.component.html b/src/app/ui/luck-draw/luck-draw.component.html index 15e52b5..611abad 100644 --- a/src/app/ui/luck-draw/luck-draw.component.html +++ b/src/app/ui/luck-draw/luck-draw.component.html @@ -1,55 +1,51 @@ - - - - - -
-
-
-
-
未中奖
-
-
-
-
-
未中奖
-
+ + + + +
+
+
+
+ 请选择支队 + {{item.name}} +
+
-
-
- -
-

二等奖

-

罗技鼠标

+
+ +
-
-
-
未中奖
-
+ + + -
-
抽 奖
-
-
- +
+ + + + + + - - diff --git a/src/app/ui/luck-draw/luck-draw.component.scss b/src/app/ui/luck-draw/luck-draw.component.scss index a9073a2..14609b5 100644 --- a/src/app/ui/luck-draw/luck-draw.component.scss +++ b/src/app/ui/luck-draw/luck-draw.component.scss @@ -1,126 +1,81 @@ -* { - margin: 0; - padding: 0; -} -body { - font-family: "Microsoft YaHei",微软雅黑; -} -.box { - width: 600px; - height: 600px; - background-color: #DEA681; - border-radius: 50%; - margin: 30px auto; - padding: 20px; - position: relative; - overflow: hidden; -} -.lottery { - width: 600px; - height: 600px; - margin: 0 auto; - border-radius: 50%; - overflow: hidden; + + html, body { + height: 100%; + } + + .mainbox { + width: 95%; + height: 95%; + padding: 0.125rem 0.125rem 0; + display: flex; + + } + + .centerLeft{ + float: left; + height: 100%; + width: 100%; position: relative; - background-color: #330000; - box-shadow: 0 0 15px #000; -} -.block { - box-shadow: 0 0 1px #000 inset; - position: absolute; + flex-direction: column; + flex: 2%; + display: flex; + align-items:center; + box-sizing: border-box; + margin: 0 0; +.tanCenterbtn{ + width: 100%; + height: 100%; +border: 1px solid #30bbec; +display: flex; +flex-direction: column; +user-select: none; +background-size:100% 100%; +span{ width: 300px; - height: 300px; - transform-origin: right bottom 0; - -webkit-transform-origin: right bottom 0; -} -.block:nth-child(odd) { - background-color: #F1AAA6; -} -.block:nth-child(even) { - background-color: #FD5B78; -} -.block:nth-child(1) { - transform: rotate(0deg) skewY(45deg); -} -.block:nth-child(2) { - transform: rotate(45deg) skewY(45deg); -} -.block:nth-child(3) { - transform: rotate(90deg) skewY(45deg); -} -.block:nth-child(4) { - transform: rotate(135deg) skewY(45deg); + cursor:pointer; + border-bottom:1px solid #30bbec; + padding: 8px ; + text-align: center; + font-size: 24px; } -.block:nth-child(5) { - transform: rotate(180deg) skewY(45deg); } -.block:nth-child(6) { - transform: rotate(225deg) skewY(45deg); } -.block:nth-child(7) { - transform: rotate(270deg) skewY(45deg); -} -.block:nth-child(8) { - transform: rotate(315deg) skewY(45deg); -} -.content { - width: 200px; - height: 230px; - transform-origin: center center 0; - transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px); - -webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px); - position: absolute; - right: 0; - bottom: 0; - text-align: center; -} -.content .img { - width: 100px; - height: 100px; - margin: 0 auto; -} -.content .text { - width: 100px; - height: 50px; - font-size: 20px; - line-height: 32px; - margin: 0 auto; -} -.content .none { - width: 34px; - height: 200px; - margin: 0 auto; +.colum{ + height: 100%; + //width: 100%; + display:table-cell; + vertical-align:middle; text-align: center; - font-size: 34px; - line-height: 200%; - font-weight: bold; -} -.content img { - width: 80px; - height: 100px; -} -.btn { - width: 100px; - height: 100px; - border-radius: 50%; - text-align: center; - line-height: 100px; - background-color: #9966CC; - position: absolute; - font-size: 28px; - top: 270px; - left: 270px; - cursor: pointer; - box-shadow: 0 0 14px #000 inset; - color: #FFF; -} -.str { - height: 0px; - width: 0px; - position: absolute; - top: 10px; - left: 300px; - border-top: 60px solid #9966CC; - border-left: 20px solid transparent; - border-right: 20px solid transparent; -} + span{ + font-size: 24px; + + //padding-top: 50%; + } +} +//选择后加背景色 +.beijicolor{ + background-color: #F7BA2A ; +} + body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} + body{color:#333; font-size:12px;font-family:"Microsoft YaHei"} + ul,ol{list-style-type:none;} + select,input,img,select{vertical-align:middle;} + input{ font-size:12px;} + a{ text-decoration:none; color:#000;} + a:hover{color:#c00; text-decoration:none;} + .clear{clear:both;} + + /* 大转盘样式 */ + .banner{max-height: 650px; + display: block; + width: 95%; + max-width: 650px; + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; + } + .banner .turnplate{display:block;width:100%;position:relative;} + .banner .turnplate canvas.item{width:100%;} + .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} + + \ No newline at end of file diff --git a/src/app/ui/luck-draw/luck-draw.component.ts b/src/app/ui/luck-draw/luck-draw.component.ts index 6c7bd8f..26ac676 100644 --- a/src/app/ui/luck-draw/luck-draw.component.ts +++ b/src/app/ui/luck-draw/luck-draw.component.ts @@ -1,5 +1,15 @@ +/* + * @Descripttion: + * @version: + * @Author: sueRimn + * @Date: 2020-09-25 08:48:50 + * @LastEditors: sueRimn + * @LastEditTime: 2020-09-27 14:58:42 + */ import { Component, OnInit } from '@angular/core'; -declare var KinerLottery:any +//import * from '../../../assets/js/awardRotate' + +declare var zhuan:any @Component({ selector: 'app-luck-draw', templateUrl: './luck-draw.component.html', @@ -9,13 +19,47 @@ export class LuckDrawComponent implements OnInit { constructor() { } - ngOnInit(): void { + ngOnInit(){ + window.setTimeout(()=>{ + //zhuan.drawRouletteWheel() + },0) - - } - + //支队数据和是否抽奖 + choujiang=[ + {name:"钦州支队",idnum:1}, + {name:"南宁支队",idnum:2}, + {name:"柳州支队",idnum:3}, + {name:"河池支队",idnum:4}, + {name:"来宾支队",idnum:5}, + {name:"贺州支队",idnum:6}, + {name:"防城港支队",idnum:7}, + {name:"崇左支队",idnum:8}, + {name:"贵港支队",idnum:9}, + {name:"梧州支队",idnum:10}, + {name:"百色支队",idnum:11}, + {name:"玉林支队",idnum:12}, + {name:"北海支队",idnum:13}, + {name:"桂林支队",idnum:14} + ] + //选中支队 + chooseid=-1 + chosseZhidui(key){ + this.chooseid=key + } - + turnplate={ + restaraunts:[], //大转盘奖品名称 + colors:[], //大转盘奖品区块对应背景颜色 + outsideRadius:192, //大转盘外圆的半径 + textRadius:155, //大转盘奖品位置距离圆心的距离 + insideRadius:68, //大转盘内圆的半径 + startAngle:0, //开始角度 + bRotate:false //false:停止;ture:旋转 + }; + + + + } diff --git a/src/assets/images/1.png b/src/assets/images/1.png new file mode 100644 index 0000000000000000000000000000000000000000..4c6c8840c91d451e2777b711960ffdf0a7eb5f7b GIT binary patch literal 498 zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i3?z4Pv7`g3#sHrXS0MdAk7WQ+i1_b1pd++O zg8YIRKD|5n?b^$G6RU;KZJ6yOfBWLzRe63MMrs0&w=JI5S(*|XVyP|8&B_%2hwtJq zpssJ8E{-7@=VK>E79BDWaEa~~-;-p0ufgF)=ezm?4U)ZWd-%QAhO1uPa`4O2&Z&93 z?(_V&P&v2w(r%Njg_BA}uT1BC9{A|@{0y_#d2sbD7vP#YN6xdEN+F<&u*UI;&>*H&Cy*d=49s? zX~VAX$F``&bM-mBw$Ri5zMHqOJ(}ZhdZXxsq7{ZG<#`^w zQ}=1`*ugz-j%G>3#s@R^z5F*jfKA}iH?qIVZ?m;@OQ;d+a`Mn4ILQxO(YqE!8{IW5PUM zRqOan@b#o-1D-9BiR)V=6$DPi?fw6M=P3cM*6M@P{6DkI zUNE13*3`Q@CvTz$0Y|hZ}+zQvA2Ae zX|m|{f2qd{MJko}=I<*^SCF;pi4oc7+^+2)_L8f)%cA-Ln^EMMb1jZj=W1jz#iyr> zy3f^{TDyL`{zJ{%w}0iui+;+RsPV=iWY4j8YJtga=^R&)|(rGE1mhK z$HW=rESPHhM5kT7d*7#gp3Gwb{$fUHTyA_bc1fJLtG(6`o9rB&R@f)F>@dp_4KJ_b`#1fXQ6S?ppGonyI0xHKULOs%^#Xqm zn}uY}-*#ALpTSAVO*49(r^YV1W?Hj1?%~#w!opuiCFfr;&dj!-Rk&vMvTdCYmw5dC zV9xRO+Ju@1=^rv09ioJt7W{F`wOJ6wwVjjUyUo3O?_TkD=_rJzd1o`7*P8V$#=GH- zZTZC2Od4lC>O9+uCLpaY+1ZUmM82>=diJ>DJ>{ZtI(u*N3>{an^LB{Ts5h5KCQ literal 0 HcmV?d00001 diff --git a/src/assets/images/turnplate-bg.png b/src/assets/images/turnplate-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..542bb12c2b242ee3f6934c8692e9c0cac5dad279 GIT binary patch literal 4720 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/turnplate-pointer.png b/src/assets/images/turnplate-pointer.png new file mode 100644 index 0000000000000000000000000000000000000000..887a8bbdd749651a33f55e671cfc8924bd4f8869 GIT binary patch literal 4611 zcmV+e68!CnP)Px#z)(z7MF0Q*jz|)9I|h_sTeW~j9 zt@D>W^Pxlar-%6E+_yUv$Vdk7cS`fs$Kf>rt6c!tWCG%e0MPigQsg?4DKhTLEn*aa+6m(KfQvkP0ClFNo{(b)A{{Hu+gxIzB*We)H_5c77!AV3x zRCwC$oQqcC$`XbL0TBj9=S)BXL6n4$G0H6wfdIb$Tb;Uece+EoE1b2?lzVMKF#Yk@ zU)7Ze^W(?A_!s};U;K;z(5u+JBCpl5(f>^VjjE=yd)b zU5v91P#jwfl%n&WpGOu0r2vZKia}B!#Zko|DUjlrVz3lI@%QJS@{y%LiX)bZkb)_W zCWerLD2^tEltNG(Nen4Pr;QXx5~KJhLva)_loWyj#3&t6icb44i}9cG5v7n6M-W4k zBBeOE7@8D{;^1QFQfL$h7DJaJr8uw{h7>x*LB%knz`^tH5yUX1FenZvMn(#a;(%gg zrO+w<9!!j^6uh+yEe<8do)kL8!JM%tg-LN3G4`b}C=MjXz7!_KLCWOh&#M#%5Fgw+9 z?g~O8VDvG%-EPkc*54{d=~v_F?*9Is5hTRuMl$rfhyfstU*+OA=}|uaeNPAi;`R#D zaVxawk5~#|z}Ob_7JQCbiNa1=i!1VG&7X>q4zWVG)K zodQ8Vk(Sc=6E?|xDOii!E2YI~uSQG?N=xa3LQtnR)X)l5+TteDE?5iXuu}?j>4&mX zzPJ(;cY9LE3dw9EUDZ2T3XK9eK9H633rhaood$BJS#z_r4Pl`dF7E~+erFTKVG6b>5kydG@bIL8XE43I{ z)+aCk0>>!E$Z$vo(-rBAqibRBQ&_=UF$9ExaU~5QOkqfIBOx;8w5(5Hoa3>1q`XQo z_=eUgB*cv|;&4KGdFB*32^w!H*fJdW##BSdado8&k&aoq6sZz0UgU~l`ES4|U-Stg z!=c4(nvPMvH=n5xrN*mWw0O}U(a~>ZQf{vd5}6K7ihj0nzF-UP8?UsD((gVTmYb2} z5E%6B_Dc7J$cN$0)E3tB7_a2y{H9OGl^khaGy=JmKGU&mJC(u@0zXfTi{i_sAT1c< zHnph?+{{NK2_bgVv_NR?9d&J4A%1|HX0acpLUr-VKBvreJDy{6e0yalkCW*m`6i;)jdm6KpF&u8IykSq8MOJ zEcw0`OwmW_!IL6Ti?O(SGa~uAi_LC=YlI_RK>W69%2;S-_vX48aTdDNIA#Wv`N^vaV>8p#CtttRqB-hB(V%P$Ct;GzT#uuT6j39VTWwxSO1~FOfm-yQCT240VQMq;*5qlx z>|2myGGr~nF+Mijp+3=k3+b_f7^`-;TL<Eq?KW;}op9}p`&=-Sq~+WC47w*plMW=egBdNDfID~aeb%7z zTwrmEn`nhOQEYkp7{CTnk66BFI^DQlY{#ywoiTnJCSG8_aGF&5?JST1F{o0y3k>Su zOIVScM335}>K8rCG*JLUuRjl!nWAm0wYH#r#$KCD%kE01YxAVB_uFXW<)*V3Fox0t zUN}+o#L|~KMUUM>6d*)@K4uw)5quv~2ZyaI@PnUjGLaCj0Ra?)X4!OwL%RTSuo@IZ zG3d&r2RcO;C?G!fYthUAm%lwmJUH8DVnCgxUR$YFsfwolNtn1U{- z@=XwJD=D_vW1%RfZYvJ3gNJp!-wY@C(Av*AUtBn;Gs+i0K~oxIbSW?3Iiv`wjgR*z zdXmEGZD&b>GAu#zfaZ%ZC5Uzj=zw0$8T=MbS|;aBq_9&Ac~ViA#|mlEpsqfqu0^+~ zYXL=X3Dw++Y03+*ca9so2;228Nk9cq$jUuK^8K#UJWsu;C?v;V&>hXka%+x~XZI1H zfM40hTUZAtx?q{?l9}gXM+>KI&x0i8Onj1}=}3P<$3hBAV30k)+tDyJ{w#c+A{Y$l z_+q4sJ$Ug!tAX{?h=aZGO)VT*tdJ0cV$k#F5&?CXPM6fdqmW{vZbp=mzy{{Mpba+M z|M^^#gDK8cLXZMSMSTUn40rBw%a-JQ1bd;pN$w2b*~7iqoApG5a>`K@oRZ>& zps*B$y-X&P9d#fWOTZ>XF>fs~)Xi2yQVcKO9Fak>aGFhS8E6Zl0I8%L@oWR;rrm4| zH89}vw0iO;G>P88nhT0$5}L6KRkzw@9!lc0Z!iTL0}}!iTTYnZi1BZ7Tk2W?)<7PG zFDUGInvI<-@g)1mEU=BP1#9C~m6A!3>Vf^jqzLdNlqoEDG>{Zlyw;-CYSBI((L^zZ z``TmcSi7p>2Mh2;6WeF`f+$vT>RrKMD=lnEfj?vlJEh26oPfcXhV9LUW>2uA_6&1V zjfn#7S#C1LQt$J`VF?ObE*%gW*2vs~Q$UTv76A;sIuGL;&)e{=Ii9$SCz!qqp|w{a}kb={WEQK2ltc z1DZ^j0)cqS3HVwGOcZjU2{+Rgn$Y%Jt{C_x(RkjsO+{cVWs2V##ab`qc{B-m`y4}o zGsPskr^*fv%=NLHXmHlSjhyqkhOu1Cf&fy7m*%J5Tc;EklA@IwBd~B){^dGoleM|Ru*Y<3^a@ zr6!Uu@goTOTe%2wO14LsQOtti?B51B&$eTDOJs z02C*Zf{n5MW^2G~BO%(0M_Ty-rr(p=D(x8S?{+9dTpJ0g0Y$06-BWHQtcGuYS9vIi z_Uut41W(!v50243zflc>kQnYtB&2{B*dQg2?oaXc4H%RTNpUT_NeTJ!qgazE5j)y9 zsbNb9rf}Jtj}J^yDu^mE#rX1qr4p4C*Ro7SLZD+*Pjj4sL**B?FB^9-NdftgQk+)B z)wOahUyQG8=CpTQYY7nr(tN0ie;S}vsIK{UWrOn}+NR??RMZvda!opebCPO-as;20!%l6fGQ!p*Dbhbp6hI6; zCu_+-x8l#F1?#hIFu*-AV}UCwXWE<1QH+c=B!@_g{XqnK4aw+q3@O}&l%i78{z_8< zF`5}`q*|<7;_UB(3;f~) z&G?Hdh*3R#G%<87TJqHSjUf26*keC*DyAuB4le}xFr~mUft&~o9{w^~@b|ZX(CKL0 za+N1LrV=9cn2$o{kINv2suMYbX0>Q}@?t^W#mn?`I?xfW%|@Xhus$k#f9?k{syfE9 zm7@i4c%FwO?2`Rcc)UvCwsRTa3zc|mN>fw{`)|!TtLoNBy`gD=5H0aO2FlMGKSG1= zCxBSfRT8`$kjFrl=(Lp*(62Jq6mOlYK~6FldX3O`TwGwtw^i^R3^CKnfv&v|v5;aT zMAn)rCzXd)iqTxO%ss^vLo5x8r(Y_>&dHMmlU;XQ4I)1u^yboP79+E#kQfTY)kqjd z=MV(+bKQ%D`g8qjLSqzN=wQ<3h5&~+pQhWAa9KxKK z7)^EBhTq(TUY z%GpbA@MMhBM?;RK-ZS(v*#nUrraj!*LLKmts-yZM1UM8iV4K(FXc{fd(^J9#UT#tZ z1TZ*K2xwUk0P#$D=y+q*Z@h0cR=80d1`{gF*pbWJOU`QmfkWXg*Tm{2=H45{$rDcs1(lL^ZAh?VpJ(D zrXB=>Yaq&OIrC;M@ioKsK?4UwFc}`vnrhwSdM2n3>1a5|BMwgRI9bZ`ynKT%_sHO}bhrq0y0S8c2B?yqbin2liuFNX> z0U1s{^&!MnrAxWxxI;4UC zfF$@@27?1h0Hs25nClw==!b9kw*reNDF~7viwe4bcJ|#2R4)d|O92Sq`OiKe$jNI2 t-;1D=oIC??5Q3BhP>3dtV)4TS{{;~kBjW#W(LVqH002ovPDHLkV1hPXS2_Ry literal 0 HcmV?d00001 diff --git a/src/assets/images/zhuan.gif b/src/assets/images/zhuan.gif new file mode 100644 index 0000000000000000000000000000000000000000..67524b79fc3b37c81ef86c709825dbbce3076179 GIT binary patch literal 12154 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 Ld-=cAROo*Ipf^-* literal 0 HcmV?d00001 diff --git a/src/assets/js/awardRotate.js b/src/assets/js/awardRotate.js new file mode 100644 index 0000000..f6d483f --- /dev/null +++ b/src/assets/js/awardRotate.js @@ -0,0 +1,305 @@ + + (function($) { + var supportedCSS,styles=document.getElementsByTagName("head")[0].style,toCheck="transformProperty WebkitTransform OTransform msTransform MozTransform".split(" "); + for (var a=0;a this._parameters.duration; + + // TODO: Bug for animatedGif for static rotation ? (to test) + if (checkEnd && !this._parameters.animatedGif) + { + clearTimeout(this._timer); + } + else + { + if (this._canvas||this._vimage||this._img) { + var angle = this._parameters.easing(0, actualTime - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration); + this._rotate((~~(angle*10))/10); + } + if (this._parameters.step) { + this._parameters.step(this._angle); + } + var self = this; + this._timer = setTimeout(function() + { + self._animate.call(self); + }, 10); + } + + // To fix Bug that prevents using recursive function in callback I moved this function to back + if (this._parameters.callback && checkEnd){ + this._angle = this._parameters.animateTo; + this._rotate(this._angle); + this._parameters.callback.call(this._rootObj); + } + }, + + _rotate : (function() + { + var rad = Math.PI/180; + if (IE) + return function(angle) + { + this._angle = angle; + this._container.style.rotation=(angle%360)+"deg"; + } + else if (supportedCSS) + return function(angle){ + this._angle = angle; + this._img.style[supportedCSS]="rotate("+(angle%360)+"deg)"; + } + else + return function(angle) + { + this._angle = angle; + angle=(angle%360)* rad; + // clear canvas + this._canvas.width = this._width+this._widthAdd; + this._canvas.height = this._height+this._heightAdd; + + // REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate.. + this._cnv.translate(this._widthAddHalf,this._heightAddHalf); // at least center image on screen + this._cnv.translate(this._widthHalf,this._heightHalf); // we move image back to its orginal + this._cnv.rotate(angle); // rotate image + this._cnv.translate(-this._widthHalf,-this._heightHalf); // move image to its center, so we can rotate around its center + this._cnv.scale(this._aspectW,this._aspectH); // SCALE - if needed ;) + this._cnv.drawImage(this._img, 0, 0); // First - we draw image + } + + })() + } + + if (IE) + { + Wilq32.PhotoEffect.prototype.createVMLNode=(function(){ + document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); + try { + !document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"); + return function (tagName) { + return document.createElement(''); + }; + } catch (e) { + return function (tagName) { + return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); + }; + } + })(); + } + })(jQuery); + + diff --git a/src/assets/js/zhuanpan.js b/src/assets/js/zhuanpan.js new file mode 100644 index 0000000..08ed5ef --- /dev/null +++ b/src/assets/js/zhuanpan.js @@ -0,0 +1,354 @@ + +var turnplate={ + restaraunts:[], //大转盘奖品名称 + colors:[], //大转盘奖品区块对应背景颜色 + outsideRadius:192, //大转盘外圆的半径 + textRadius:155, //大转盘奖品位置距离圆心的距离 + insideRadius:68, //大转盘内圆的半径 + startAngle:0, //开始角度 + bRotate:false //false:停止;ture:旋转 +}; +choujiang=[ + {name:"钦州支队",idnum:1,result:""}, + {name:"南宁支队",idnum:1,result:""}, + {name:"柳州支队",idnum:1,result:""}, + {name:"河池支队",idnum:1,result:""}, + {name:"来宾支队",idnum:1,result:""}, + {name:"贺州支队",idnum:1,result:""}, + {name:"防城港支队",idnum:1,result:""}, + {name:"崇左支队",idnum:1,result:""}, + {name:"贵港支队",idnum:9,result:""}, + {name:"梧州支队",idnum:10,result:""}, + {name:"百色支队",idnum:11,result:""}, + {name:"玉林支队",idnum:12,result:""}, + {name:"北海支队",idnum:13,result:""}, + {name:"桂林支队",idnum:14,result:""} +] +$(document).ready(function(){ + //var chooseid = $( "span[name='zhidui']").attr('id'); + $("span[name='aaa']").on("click",function(){ + console.log($(this).html()) + if($(this).html()=="钦州支队"){ + turnplate.restaraunts = ["广西东油沥青有限公司", "钦州吾悦广场", "钦州天亿石化有限公司"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6"]; + console.log(choujiang[0].result) + if(choujiang[0].idnum<=2) + { + $("#zhuanpan").show() + $("#end").hide(); + console.log(choujiang[0].idnum) + choujiang[0].idnum++ + choujiang[0].result='钦州吾悦广场' + $("#jieguo").empty() + }else{ + $("#zhuanpan").hide() + $("#end").show(); + console.log(choujiang[0].idnum) + $("#jieguo").empty() + $("#jieguo").append("您的抽签结果为：
"+choujiang[0].result) + } + + drawRouletteWheel() + }else if($(this).html()=="南宁支队") + { + turnplate.restaraunts = ["九洲国际（超高层）", "南宁国际会展中心", "维景国际酒店", "荔园山庄 "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + if(choujiang[1].idnum<=2) + { + $("#zhuanpan").show() + $("#end").hide(); + choujiang[1].idnum++ + choujiang[1].result='九洲国际（超高层）' + $("#jieguo").empty() + }else{ + $("#zhuanpan").hide() + $("#end").show(); + $("#jieguo").empty() + $("#jieguo").append("您的抽签结果为：
"+choujiang[1].result) + } + drawRouletteWheel() + }else if($(this).html()=="柳州支队") + { + turnplate.restaraunts = ["广西柳州莲花山庄", "柳州万达广场", "龙城地下商业街", "板栗园加气站 ","地王财富中心"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="河池支队") + { + turnplate.restaraunts = ["河池市中石化金城江油库", "河池市宜州区地下商业街", "南城百货（地下） ","宁铁燃气有限责任公司","广西河池市大洋购物中心"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="来宾支队") + { + turnplate.restaraunts = ["来宾饭店（高层）", "宝晨化工", "天成百货（地下） ","百悦商业广场(地下）","来宾市方盛广场（人员密集）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="贺州支队") + { + turnplate.restaraunts = ["贺州市国际酒店（高层）", "宝晨化工有限公司", "贺州市南宁百货大楼", "远东国贸地下停车场 "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + } + else if($(this).html()=="防城港支队") + { + turnplate.restaraunts = ["防城港供电局", "北京华联超市桂海东盟店", "港宸国际大酒店（高层）", "永旺天和商贸有限公司(只做地下一） ", "广西中油能源有限公司 ","中海油广西防城港天然气有限责任公司 "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="崇左支队") + { + turnplate.restaraunts = ["崇左油库","崇左市雅图影视广场（6层商场）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="贵港支队") + { + turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "维多利亚酒店（高层）","平南中心购物广场（地下）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="梧州支队") + { + turnplate.restaraunts = ["广西威汉鞋业有限公司", "贵港市嘉龙海杰电子科技有限公司", "贵港市覃塘区人民医院综合楼", "贵港市中国石油分公司油库 ", "梧州市中石化火山油库","平南中心购物广场（地下）", ]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="百色支队") + { + turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） "]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="玉林支队") + { + turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","玉林市中医医院"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="北海支队") + { + turnplate.restaraunts = ["平果地下商业街", "三雷油库", "安达曼国际酒店(高层）", "恒宁城市广场（大型城市综合体） ","和安宁春城（大型城市综合体）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + }else if($(this).html()=="桂林支队") + { + turnplate.restaraunts = ["兴安油库", "宏谋酒店（高层）"]; + turnplate.colors = ["#FFF4D6", "#FFFFFF"]; + $("#zhuanpan").show() + $("#end").hide(); + $("#jieguo").empty() + drawRouletteWheel() + } + }); + console.log(turnplate.restaraunts) +//动态添加大转盘的奖品与奖品区域背景颜色 +/* turnplate.restaraunts = ["广西东油沥青有限公司", "钦州天亿石化有限公司", "九洲国际（超高层）", "南宁国际会展中心 ", "维景国际酒店", "荔园山庄"]; +turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; */ +/* turnplate.restaraunts = ["白云边", "关公坊", "黄鹤楼", "国宝 ", "陈克明", "金沙河", "雪花", "康师傅", "脉动","奥星","金龙鱼","中昌"]; +turnplate.colors = ["#FFF4D6", "#FFFFFF", "#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 (){ + console.log(turnplate.restaraunts.length) + $("#zhuanpan").hide() + $("#end").show(); + var dataLength=turnplate.restaraunts.length + if(dataLength>=5) + { + $("#jieguo").append("您的抽签结果为：
"+turnplate.restaraunts[4]) + }else if(dataLength==3){ + $("#jieguo").append("您的抽签结果为：
"+turnplate.restaraunts[1]) + } + else{ + $("#jieguo").append("您的抽签结果为：
"+turnplate.restaraunts[0]) + } + turnplate.bRotate = !turnplate.bRotate; + } + }); +}; + +$('.pointer').click(function (){ + if(turnplate.bRotate)return; + turnplate.bRotate = !turnplate.bRotate; + //获取随机数(奖品个数范围内) + var item = rnd(1,turnplate.restaraunts.length); + console.log(item) + //奖品数量等于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 = 5; +//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; j6){//奖品名称长度超过一定范围 + text = text.substring(0,6)+"||"+text.substring(6); + var texts = text.split("||"); + for(var j = 0; j0){ + 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(); + //----绘制奖品结束---- + } +} +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 15655ad..56a9352 100644 --- a/src/index.html +++ b/src/index.html @@ -1,3 +1,11 @@ + @@ -15,7 +23,9 @@ - - - + + + +