使用SVG绘制转盘图形加上转盘抽奖功能

来源：互联网发布：淘宝代运营骗局举报编辑：程序博客网时间：2024/06/05 02:30

使用SVG来绘制转盘的图形，可以定制任何样式的转盘和抽奖描述，减少外部图片的添加。结合抽奖功能。

截图：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SVG绘制转盘图形</title>
<script src="jquery-1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#content #pointer svg").click(function(e) {
var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数
$("#zhuan svg").css('transform', 'rotate(' + num + 'deg)');
num %= 360; //num=num%360;摩以360后的余数，
//得到一个1至360的数值，进行转盘分成几分的判断
//设定旋转变换3秒后执行下面的提示
setTimeout(function() {
if(num <= 60.0 * 1+30.0) {
alert('京东券15元');
} else if(num <= 60.0 * 2+30.0) {
alert('金币');
} else if(num <= 60.0 * 3+30.0) {
alert('京东券5元');
} else if(num <= 60.0 * 4+30.0) {
alert('理财代金券');
} else if(num <= 60.0 * 5+30.0) {
alert('京东券30元');
} else if(num <= 60.0 * 6+30.0) {
alert('理财加息券');
}
}, 3000);

});
});
</script>
<style type="text/css">
/*转盘背景*/
#content {
width: 500px;
height: 500px;
margin:-50px auto;
overflow: hidden;
position: relative;
}
#zhuan{
width: 500px;
height: 500px;
}
#zhuan svg{
width: 500px;
height: 500px;
transition: all 3s ease;

-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
#content #pointer{
width: 100px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
cursor: pointer;

-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#content #pointer svg{
width: 100px;
height: 100px;
}
</style>
</head>

<body>
<div id="content">
<div id="zhuan">

<svg width="500" height="500">

<circle cx="250" cy="250" r="200" stroke="#EB826B"
fill="transparent" stroke-width="5" />


<path d="M 150 76.8
A 200 200, 0, 0, 1, 350 76.8
L 250 250 Z"
fill="#FEE9A7" stroke="#FFBE46" stroke-width="1" />

<text x="200" y="116.8" transform="rotate(0)" fill="#BD6D26">理财加息券</text>

<path d="M 350 76.8
A 200 200, 0, 0, 1, 450 250
L 250 250 Z"
fill="#FEF1CB" stroke="#FFBE46" stroke-width="1" />

<text x="300" y="-236.8" transform="rotate(60)" fill="#BD6D26">京东券30元</text>


<path d="M 450 250
A 200 200, 0, 0, 1, 350 423.3
L 250 250 Z"
fill="#FEE9A7" stroke="#FFBE46" stroke-width="1" />

<text x="50" y="-476.8" transform="rotate(120)" fill="#BD6D26">理财代金券</text>


<path d="M 350 423.3
A 200 200, 0, 0, 1, 150 423.3
L 250 250 Z"
fill="#FEF1CB" stroke="#FFBE46" stroke-width="1" />

<text x="-300" y="-400" transform="rotate(180)" fill="#BD6D26">京东券5元</text>


<path d="M 50 250
A 200 200, 0, 0, 0, 150 423.3
L 250 250 Z"
fill="#FEE9A7" stroke="#FFBE46" stroke-width="1" />

<text x="-350" y="-50" transform="rotate(240)" fill="#BD6D26">金币</text>


<path d="M 50 250
A 200 200, 0, 0, 1, 150 76.8
L 250 250 Z"
fill="#FEF1CB" stroke="#FFBE46" stroke-width="1" />

<text x="-130" y="200" transform="rotate(300)" fill="#BD6D26">京东券15元</text>

</svg>
</div>
<div id="pointer">
<svg width="100" height="100">

<path d="M 50 0
A 50 50, 0, 1, 0, 100 50
L 100 0 Z" fill="#E62D2D"/>

<text x="40" y="10" transform="rotate(45)" fill="#FFF">开始抽奖</text>
</svg>
</div>
</div>
</body>
</html>

0 0