使用CSS3绘制转盘图抽奖功能

来源：互联网发布：淘宝二手名表是真的吗编辑：程序博客网时间：2024/05/17 01:18

再换一个绘图方式，使用CSS3绘制转盘图抽奖功能

截图：

代码：

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>使用CSS3绘制转盘图抽奖功能</title>
<script type="text/javascript">
//页面加载执行事件,常用
window.onload = function() {
//document.getElementById("pointer")：访问ID对象，onclick 点击事件
document.getElementById("pointer").onclick = function() {
var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数
document.getElementById("zhuan").style.transform = 'rotate(' + num + 'deg)';

num %= 360; //num=num%360;摩以360后的余数，
//得到一个1至360的数值，进行转盘分成几分的判断
//设定旋转变换3秒后执行下面的提示
setTimeout(function() {
if(num <= 60.0 * 1 + 30.0) {
alert('理财代金券');
} else if(num <= 60.0 * 2 + 30.0) {
alert('京东券30元');
} else if(num <= 60.0 * 3 + 30.0) {
alert('理财加息券');
} else if(num <= 60.0 * 4 + 30.0) {
alert('京东券15元');
} else if(num <= 60.0 * 5 + 30.0) {
alert('获得20金币');
} else if(num <= 60.0 * 6 + 30.0) {
alert('京东券5元');
}
}, 3000);

};
};
</script>
<style type="text/css">
/*转盘*/
#zhuan {
width: 350px;
height: 350px;
margin: 50px auto;
border: solid 10px #EB826B;
border-radius:50%;
overflow: hidden;
position: relative;
transition: all 3s ease;
}

/*正三角性加圆角变成圆弧*/
.trh {
width: 0;
height: 0;
border-bottom: 173.3px solid #FEF1CB;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-radius:0 0 100px 100px;
position: absolute;
top: 175px;
left: 75px;
}
/* trh的父元素的1个子元素，旋转60度角度*/
.trh:first-child {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
border-bottom: 173.3px solid #FEE9A7;

-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
/* trh的父元素的2个子元素 */
.trh:nth-child(2) {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;

-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}

/* trh的父元素的3个子元素 */
.trh:nth-child(3) {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
border-bottom: 173.3px solid #FEE9A7;

-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/* trh的父元素的4个子元素 */
.trh:nth-child(4) {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;

-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}

/* trh的父元素的5个子元素 */
.trh:nth-child(5) {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
border-bottom: 173.3px solid #FEE9A7;

-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
/* trh的父元素的6个子元素 */
.trh:nth-child(6) {
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;

-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
/*转盘指针的圆形*/
#pointer{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: relative;
top: -260px;
left: 650px;
cursor: pointer;
}
/*转盘指针的尖角*/
#pointer:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 42.3px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
top: 30px;
left: 0px;
}
</style>
</head>

<body>
<div id="zhuan">
<div class="trh">***获得20金币</div>
<div class="trh">***京东券15元</div>
<div class="trh">***理财加息券</div>
<div class="trh">***京东券30元</div>
<div class="trh">***理财代金券</div>
<div class="trh">***京东券5元</div>
</div>
<div id="pointer"></div>
</body>

</html>

0 0