Use the jQuery rotation plug-in jqueryrotate to create a turntable lottery, jqueryjqueryrotate

Use the jQuery rotation plug-in jqueryrotate to create a turntable lottery, jqueryjqueryrotate

This article provides an example of how to use the jQuery rotation plug-in jqueryrotate to create a turntable lottery for your reference. The details are as follows:

: Jqueryrotate

<! DOCTYPE html> 
/* Initialize the style */body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div {margin: 0; padding: 0; border: 0;} ul, ol {list-style-type: none;} select, input, img, select {vertical-align: middle;} a {text-decoration: none; color: #000;} a: hover {color: # c00; text-decoration: none ;}. clear {clear: both;} input {font-size: 12px;} body {color: #333; font-size: 12px; font-family: "Microsoft YaHei"; background: # e62d2d; background: greenyellow; overflow-x: hidden;}/* large turntable style */. content {display: block; width: 95%;/* center display */margin: 30px auto ;}. content. wheel {display: block; width: 100%; position: relative;/* background of the turntable */background-image: url (.. /images/wheel-bg.png); background-size: 100% 100% ;}. content. wheel canvas. item {width: 100% ;}. content. wheel img. pointer {position: absolute; width: 31.5%; height: 42.5%; left: 34.3%; top: 23% ;}. tips {text-align: center; margin: 20px 0; color: red; font: normal 24px 'Microsoft yahei ';}
// Determine if it is a mobile device var isMobile = {Android: function () {return navigator. userAgent. match (/Android/I )? True: false;}, BlackBerry: function () {return navigator. userAgent. match (/BlackBerry/I )? True: false ;}, iOS: function () {return navigator. userAgent. match (/iPhone | iPad | iPod/I )? True: false;}, Windows: function () {return navigator. userAgent. match (/IEMobile/I )? True: false;}, any: function () {return (isMobile. android () | isMobile. blackBerry () | isMobile. iOS () | isMobile. windows () ;}}; var turnWheel ={ rewardNames: [], // turntable prize name array colors: [], // the background color outsideRadius of the turntable prize block: 192, // The radius of the outer circle of the turntable textRadius: 155, // The distance from the turntable prize location to the center of the insideRadius: 68, // the radius of the incircle of the turntable startAngle: 0, // start angle bRotate: false // false: Stop; true: Rotate}; // Image Information var imgQb = new Image (); imgQb. src = "~ /../Images/qb.png "; var imgSorry = new Image (); imgSorry. src = "~ /.. /Images/2.png"; $ (document ). ready (function () {// simulate data. You can use Ajax to request server data and add the background color of the big turntable prize and prize area/* $. ajax ({type: "POST", url :"~ /.. /Json/data. json ", data: null, async: false, dataType:" json ", // return data type success: function (data) {turnWheel. rewardNames = data ["rewardNames"]; turnWheel. colors = data ["colors"] ;}, error: function (data) {alert ("network error, please check your network settings! "); $ (" # Tip "). text ("failed to request data") ;}}); */turnWheel. rewardNames = ["m traffic package", "10Q coin", "Thank you for your participation", "5Q coin", "10 m traffic package", "20 m traffic package ", "10 m traffic package", "20 m traffic package", "20Q coin", "30 m traffic package", "m traffic package", "2Q coin"]; turnWheel. colors = ["# FFF4D7", "# FFFFFF", "# F0F4D8", "# FFFFFF", "# FFF4D0", "# FFFFFF", "# FFF4D0 ", "# FFFFFF", "# FFF4D6", "# FFFFFF", "# FFF4D6", "# FFFFFF"]; // rotating turntable item: prize number, starting from 0; txt: prompt, count the total number of prizes; function rotateFunc (Item, tip, count) {// The rotation angle. The rotation extension angle parameter is angular. Var baseAngle = 360/count; // rotation angle = 270 ° (the offset of the current first angle and pointer position) -prize location * angle of each part-half of the angle of each part (the Pointer Points to the middle of the Area) angles = 360*3/4-(item * baseAngle)-baseAngle/2; // because the first prize starts from 0 °, that is, the horizontal direction to the right $ ('# wheelCanvas '). stopRotate (); // note that the angle transmitted by the jqueryrotate plug-in is not in radians. // Which label calls the method and which control to rotate $ ('# wheelCanvas '). rotate ({angle: 0, // The number of initial rotation angles, and immediately execute the "animateTo: angles + 360*5" command. // five more circles are rotated here, and the more circles there are, the faster the conversion, the duration: 8000. // specify the animation execution duration using animateTo. callback: function () {// callback method $ ("# tip "). text (tip); turnWheel. bRotate =! TurnWheel. bRotate; if (isMobile. any () // determines whether to move the device {// call the OC code window. location. href = "turntable: // test.com? "+" Index = "+ item +" & tip = "+ tip ;}}) ;}; // click the trigger event $ ('. pointer '). click (function () {// rotating, directly returning if (turnWheel. bRotate) return; turnWheel. bRotate =! TurnWheel. bRotate; var count = turnWheel. rewardNames. length; // here, the user's real winning information (corresponding winning serial number) should be obtained from the server // a simple simulation of the random winning serial number (within the range of prize numbers) var item = randomNum (0, count-1); // start rotateFunc (item, turnWheel. rewardNames [item], count) ;});/* returns a random integer n between n and m <= random <= m */function randomNum (n, m) {/* Math. floor (Math. random () * 10); a random integer ranging from 0 to 9 can be obtained evenly. */Var random = Math. floor (Math. random () * (m-n) + n; console. log ("rewardNames [" + random + "]"); return random;} // after all elements of the page are loaded, execute the drawWheelCanvas () method to render the window of the turntable. onload = function () {drawWheelCanvas () ;};/** render turntable **/function drawWheelCanvas () {// obtain the canvas, which is equivalent to layer ?? Var canvas = document. getElementById ("wheelCanvas"); // var canvas = ($ ("# wheelCanvas ")). get () [0]; // note that jQuery obtains encapsulated objects, not DOM objects. You can convert them and calculate the angle of each block, var baseAngle = Math in radians. PI * 2/(turnWheel. rewardNames. length); // obtain the context var ctx = canvas. getContext ("2d"); var canvasW = canvas. width; // The height of the canvas var canvasH = canvas. height; // The width of the canvas // clear a rectangle ctx in the given rectangle. clearRect (0, 0, canvasW, canvasH); // strokeStyl E. Draw the color ctx. strokeStyle = "# FFBE04"; // red // The current font attribute ctx of the text content on the font canvas. font = '16px Microsoft yahei'; // note that the start position starts from the 0 ° angle. That is, the horizontal direction to the right. // Draw the specific content for (var index = 0; index <turnWheel. rewardNames. length; index ++) {// current angle var angle = turnWheel. startAngle + index * baseAngle; // fill color ctx. fillStyle = turnWheel. colors [index]; // start to draw content // --------- basic background color ---------- ctx. beginPath ();/** draw an arc, which is similar to * context. arc (x, y, r, sAngle, eAngle, counterclockwise); * x: center of the circle x * y: center of the circle x * sAngle, eAngle: start angle and end angle * counterclockwise: Draw direction, Optional, False = clockwise, true = counterclockwise **/ctx. arc (canvasW * 0.5, canvasH * 0.5, turnWheel. outsideRadius, angle, angle + baseAngle, false); ctx. arc (canvasW * 0.5, canvasH * 0.5, turnWheel. insideRadius, angle + baseAngle, angle, true); ctx. stroke (); ctx. fill (); // Save the canvas status, which is similar to the image context stack. You can Restore the status (coordinates are restored to the current 0, 0), ctx. save ();/* ---- draw prize content ---- key ---- * // ctx in red. fillStyle = "# E5302F"; var rewardName = turnWheel. re WardNames [index]; var line_height = 17; // The translate method remaps the (0, 0) Position on the canvas // context. translate (x, y); // see the PPT image. var translateX = canvasW * 0.5 + Math. cos (angle + baseAngle/2) * turnWheel. textRadius; var translateY = canvasH * 0.5 + Math. sin (angle + baseAngle/2) * turnWheel. textRadius; ctx. translate (translateX, translateY); // The rotate method rotates the current drawing because the text is suitable for the vertical center line of the current sector! // Angle, angle of the current slice self rotation + baseAngle/2 center line multi-Rotation angle + vertical angle 90 ° ctx. rotate (angle + baseAngle/2 + Math. PI/2);/** the following Code renders different effects based on the prize type and prize Name Length, such as font, color, and image effect. (Changed as needed) ** // The measureText () method of canvas returns an object containing the specified font width in pixels. // The fillText () method draws the filled text on the canvas. The default color of text is black. The fillStyle attribute uses another color/gradient to render text/** context. fillText (text, x, y, maxWidth); * Note !!! Y is the bottom value of the text, not the top Value !!! **/If (rewardName. indexOf ("M")> 0) {// query whether the field traffic package var rewardNames = rewardName. split ("M"); for (var j = 0; j <rewardNames. length; j ++) {ctx. font = (j = 0 )? 'Bold 20px Microsoft yahei': '16px Microsoft yahei'; if (j = 0) {ctx. fillText (rewardNames [j] + "M",-ctx. measureText (rewardNames [j] + "M "). width/2, j * line_height);} else {ctx. fillText (rewardNames [j],-ctx. measureText (rewardNames [j]). width/2, j * line_height) ;}} else if (rewardName. indexOf ("M") =-1 & rewardName. length> 6) {// The prize name length exceeds a certain range. rewardName = rewardName. substring (0, 6) +" | "+ RewardName. substring (6); var rewardNames = rewardName. split ("|"); for (var j = 0; j <rewardNames. length; j ++) {ctx. fillText (rewardNames [j],-ctx. measureText (rewardNames [j]). width/2, j * line_height) ;}} else {// draw filled text on the canvas. The default text color is black ctx. fillText (rewardName,-ctx. measureText (rewardName ). width/2, 0);} // Add the corresponding icon if (rewardName. indexOf ("qcoin")> 0) {// note that imgQb can be drawn only after img is loaded. onload = function () {ctx. drawImage (imgQb,-15, 10) ;}; ctx. drawImage (imgQb,-15, 10);} else if (rewardName. indexOf ("Thank you for participating")> = 0) {imgSorry. onload = function () {ctx. drawImage (imgSorry,-15, 10) ;}; ctx. drawImage (imgSorry,-15, 10);} // restores the ctx prior to the last save () state. restore ();/* ---- draw prize ends ----*/}}
If ajax and date. json files are used:
{"RewardNames": ["50 m traffic package", "10Q coin", "Thank you for your participation", "5Q coin", "10 m traffic package", "20 m traffic package ", "10 m traffic package", "20 m traffic package", "20Q coin", "30 m traffic package", "m traffic package", "2Q coin"], "colors ": ["# FFF4D7", "# FFFFFF", "# F0F4D8", "# FFFFFF", "# FFF4D0", "# FFFFFF", "# FFF4D0 ", "# FFFFFF", "# FFF4D6", "# FFFFFF", "# FFF4D6", "# FFFFFF"]}
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.