抽奖转盘
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><script type="text/javascript" src="jquery-2.1.4.min.js"></script><title>轉盤抽獎</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><style type="text/css">* {padding: 0px;margin: 0px;font-size: 16px;font-family: "Microsoft YaHei";}.turnplate_box {width: 300px;height: 300px;margin: 100px auto;position: relative;border: 1px solid red;}.turnplate_box canvas {position: absolute;border: 1px solid yellow;}#myCanvas {background-color: white;border-radius: 100%;}#myCanvas01,#myCanvas03 {left: 50px;top: 50px;z-index: 30;}#myCanvas02 {left: 75px;top: 75px;z-index: 20; }#myCanvas {-o-transform: transform 6s;-ms-transform: transform 6s;-moz-transform: transform 6s;-webkit-transform: transform 6s;transition: transform 6s;-o-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;}.turnplatw_btn {width: 60px;height: 60px;left: 120px;top: 120px;border-radius: 50%;position: absolute;cursor: pointer;border: none;background: transparent;outline: none;z-index: 40;border: 1px solid red;}</style><script type="text/javascript">$(document).ready(function() {//旋轉角度var angles;//可抽獎次數var clickNum = 5;//旋轉次數var rotNum = 0;//中獎公告var notice = null;//轉盤初始化var color = ["red", "green", "blue", "darkblue", "black", "yellow"];//轉盤，轉盤，內園，字顏色，開始抽獎顏色，開始抽獎背景顏色var info = ["謝謝參與", " 1000", " 10", " 500", " 100", " 4999", " 1", " 20"];var info1 = ['再接再厲', ' 元', ' 萬元', ' 淘金幣', ' 萬美元', ' 淘金幣', ' 日游(月球)', ' 個美女']canvasRun();$('#tupBtn').bind('click', function() {alert(1);if (clickNum >= 1) {//可抽獎次數減一clickNum = clickNum - 1;//轉盤旋轉runCup();//轉盤旋轉過程“開始抽獎”按鈕無法點擊$('#tupBtn').attr("disabled", true);//旋轉次數加一rotNum = rotNum + 1;//“開始抽獎”按鈕無法點擊恢復點擊setTimeout(function() {alert(notice);$('#tupBtn').removeAttr("disabled", true);}, 6000);} else {alert("親，抽獎次數已用光！");}});//轉盤旋轉function runCup() {probability();var degValue = 'rotate(' + angles + 'deg' + ')';$('#myCanvas').css('-o-transform', degValue); //Opera$('#myCanvas').css('-ms-transform', degValue); //IE瀏覽器$('#myCanvas').css('-moz-transform', degValue); //Firefox$('#myCanvas').css('-webkit-transform', degValue); //Chrome和Safari$('#myCanvas').css('transform', degValue);}//各獎項對應的旋轉角度及中獎公告內容function probability() {//獲取隨機數var num = parseInt(Math.random() * (7 - 0 + 0) + 0);//概率if (num == 0) {angles = 2160 * rotNum + 1800;notice = info[0] + info1[0];}//概率else if (num == 1) {angles = 2160 * rotNum + 1845;notice = info[7] + info1[7];}//概率else if (num == 2) {angles = 2160 * rotNum + 1890;notice = info[6] + info1[6];}//概率else if (num == 3) {angles = 2160 * rotNum + 1935;notice = info[5] + info1[5];}//概率else if (num == 4) {angles = 2160 * rotNum + 1980;notice = info[4] + info1[4];}//概率else if (num == 5) {angles = 2160 * rotNum + 2025;notice = info[3] + info1[3];}//概率else if (num == 6) {angles = 2160 * rotNum + 2070;notice = info[2] + info1[2];}//概率else if (num == 7) {angles = 2160 * rotNum + 2115;notice = info[1] + info1[1];}}//繪制轉盤function canvasRun() {var canvas = document.getElementById('myCanvas');var canvas01 = document.getElementById('myCanvas01');var canvas03 = document.getElementById('myCanvas03');var canvas02 = document.getElementById('myCanvas02');var ctx = canvas.getContext('2d');var ctx1 = canvas01.getContext('2d');var ctx3 = canvas03.getContext('2d');var ctx2 = canvas02.getContext('2d');createCircle();createCirText();initPoint();//外圓function createCircle() {var startAngle = 0; //扇形的開始弧度var endAngle = 0; //扇形的終止弧度//畫一個8等份扇形組成的圓形for (var i = 0; i < 8; i++) {startAngle = Math.PI * (i / 4 - 1 / 8);endAngle = startAngle + Math.PI * (1 / 4);ctx.save();ctx.beginPath();ctx.arc(150, 150, 100, startAngle, endAngle, false);ctx.lineWidth = 120;if (i % 2 == 0) {ctx.strokeStyle = color[0];} else {ctx.strokeStyle = color[1];}ctx.stroke();ctx.restore();}}//各獎項function createCirText() {ctx.textAlign = 'start';ctx.textBaseline = 'middle';ctx.fillStyle = color[3];var step = 2 * Math.PI / 8;for (var i = 0; i < 8; i++) {ctx.save();ctx.beginPath();ctx.translate(150, 150);ctx.rotate(i * step);ctx.font = " 20px Microsoft YaHei";ctx.fillStyle = color[3];ctx.fillText(info[i], -30, -115, 60);ctx.font = " 14px Microsoft YaHei";ctx.fillText(info1[i], -30, -95, 60);ctx.closePath();ctx.restore();}}function initPoint() {//箭頭指針ctx1.beginPath();ctx1.moveTo(100, 24);ctx1.lineTo(90, 62);ctx1.lineTo(110, 62);ctx1.lineTo(100, 24);ctx1.fillStyle = color[5];ctx1.fill();ctx1.closePath();//中間小圓ctx3.beginPath();ctx3.arc(100, 100, 40, 0, Math.PI * 2, false);ctx3.fillStyle = color[5];ctx3.fill();ctx3.closePath();//小圓文字ctx3.font = "Bold 20px Microsoft YaHei";ctx3.textAlign = 'start';ctx3.textBaseline = 'middle';ctx3.fillStyle = color[4];ctx3.beginPath();ctx3.fillText('開始', 80, 90, 40);ctx3.fillText('抽獎', 80, 110, 40);ctx3.fill();ctx3.closePath();//中間圓圈ctx2.beginPath();ctx2.arc(75, 75, 75, 0, Math.PI * 2, false);ctx2.fillStyle = color[2];ctx2.fill();ctx2.closePath();}}});</script></head><body><div class="turnplate_box"><canvas id="myCanvas" width="300px" height="300px">抱歉！瀏覽器不支持。</canvas><canvas id="myCanvas01" width="200px" height="200px">抱歉！瀏覽器不支持。</canvas><canvas id="myCanvas03" width="200px" height="200px">抱歉！瀏覽器不支持。</canvas><canvas id="myCanvas02" width="150px" height="150px">抱歉！瀏覽器不支持。</canvas><button id="tupBtn" class="turnplatw_btn"></button></div><!-- 更改系統默認彈窗 --><script type="text/javascript">window.alert = function(str) {var shield = document.createElement("DIV");shield.id = "shield";shield.style.position = "absolute";shield.style.left = "50%";shield.style.top = "50%";shield.style.width = "280px";shield.style.height = "150px";shield.style.marginLeft = "-140px";shield.style.marginTop = "-110px";shield.style.zIndex = "25";var alertFram = document.createElement("DIV");alertFram.id = "alertFram";alertFram.style.position = "absolute";alertFram.style.width = "280px";alertFram.style.height = "150px";alertFram.style.left = "50%";alertFram.style.top = "50%";alertFram.style.marginLeft = "-140px";alertFram.style.marginTop = "-110px";alertFram.style.textAlign = "center";alertFram.style.lineHeight = "150px";alertFram.style.zIndex = "300";strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中獎提醒]</li>\n";strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">" + str + "</li>\n";strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"確 定\" οnclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";strHtml += "</ul>\n";alertFram.innerHTML = strHtml;document.body.appendChild(alertFram);document.body.appendChild(shield);this.doOk = function() {alertFram.style.display = "none";shield.style.display = "none";}alertFram.focus();document.body.onselectstart = function() {return false;};}</script></body></html>
總結
- 上一篇： java-日记本（一）
- 下一篇： Python 之数据类型