圓盤抽獎

*.{margin:0;padding:0;}

#elm1{height:40px;background-color:#a00;}

#elm2{height:50px;background-color:#0a0;}

#wrap{position:relative;height:400px;}

#bg{position:absolute;left:0;top:0;}

#cell{position:absolute;left:0;top:0;}

#control{position:absolute;left:430px;top:30px;}

startendshow

var field = [[0,30],[30,60],[60,90],[90,120],[120,150],[150,180],[180,210],[210,240],[240,270],[270,300],[300,330],[330,360]]

,fillStyle = ['#a00','#0a0','#00a','aa0','#a16','#0aa','#a5a','f31','#784','#a43','#34a','#786']

,width = 400

,height = 400

,c_x = 200

,c_y =200

,radius = 200

,dom_bg = document.getElementById('bg')

,dom_cell = document.getElementById('cell')

,index =0

,timer = null

,stop = false

,running = false

,speed = 300

,flag = false

,stepall

,stepfast = 7

,stepslow

,stepping =0

,selected

,pos;

function setup(){

drawBg();

}

function drawBg(){

var deg = Math.PI/180;

var tmp_1 = 0;

var tmp_2 = 30;

dom_bg.height = height;

dom_bg.width = width;

var ctx=dom_bg.getContext('2d');

for(var i=0;i<12;i++){

ctx.beginPath();

ctx.fillStyle = fillStyle[i];

ctx.moveTo(c_x,c_y);

ctx.arc(c_x,c_y,radius,deg*tmp_1,deg*tmp_2,false);

ctx.fill();

ctx.fillStyle = '#000';

ctx.fillText(tmp_1,200+Math.cos(deg*(tmp_1+15))*130,200+Math.sin(deg*(tmp_1+15))*130);

tmp_1 +=30;

tmp_2 +=30;

}

}

function drawBgText(){

}

function rotate(){

if(!flag && stepping>7){

clearTimer();

speed = 100;

timer = setInterval(rotate,speed);

}

if(flag && stepping > stepslow && stepping

clearTimer();

speed = 300;

timer = setInterval(rotate,speed);

}

if(index ==12){

index = 0;

}

if(flag && stepping == stepall){

clearTimer();

happy();

}

drawCell();

index++;

stepping++;

}

function drawCell(){

var deg = Math.PI/180;

var tmp_1 = field[index][0];

var tmp_2 = field[index][1];

dom_cell.height=height;

dom_cell.width =width;

var ctx=dom_cell.getContext('2d');

ctx.beginPath();

ctx.fillStyle = '#eee';

ctx.moveTo(c_x,c_y);

ctx.arc(c_x,c_y,radius,deg*tmp_1,deg*tmp_2,false);

ctx.fill();

}

function createStop(){

selected = Math.floor(Math.random() * 11); //從0-11個數字中選 想zb在這控制一下。

var circle = Math.floor(Math.random()*3) + 2;

var c_step = circle *12;

var actualIndex = stepping%12;

stepall = selected - actualIndex + c_step;

flag = true;

stepslow = stepall - 7;

stepping = 0;

}

function happy(){

document.getElementById("show").innerText = selected + '選上了';

}

function startClick(){

if(running){

return;

}

running= true;

timer = setInterval(rotate,speed);

}

function endClick(){

if(stop){

return;

}

stop = true;

clearTimer();

createStop();

timer = setInterval(rotate,speed);

}

function clearTimer(){

clearInterval(timer);

timer = null;

}

setup();

document.getElementById('start').addEventListener('click',startClick,false);

document.getElementById('end').addEventListener('click',endClick,false);

總結

以上是生活随笔為你收集整理的html5 抽奖程序,真正的网页抽奖-JavaScript HTML5代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。