内外盘转盘抽奖html
时间: 2023-12-30 16:24:43 浏览: 34
以下是一个内外盘转盘抽奖的HTML示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>内外盘转盘抽奖</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.inner-wheel, .outer-wheel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f1f1f1;
border-radius: 50%;
border: 2px solid #ccc;
box-sizing: border-box;
}
.inner-wheel {
background-color: #ffcc00;
}
.slice {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
transform-origin: 100% 50%;
transition: transform 4s ease-in-out;
}
.slice:nth-child(1) {
background-color: #ff0000;
transform: rotate(0deg);
}
.slice:nth-child(2) {
background-color: #00ff00;
transform: rotate(60deg);
}
.slice:nth-child(3) {
background-color: #0000ff;
transform: rotate(120deg);
}
.slice:nth-child(4) {
background-color: #ff00ff;
transform: rotate(180deg);
}
.slice:nth-child(5) {
background-color: #00ffff;
transform: rotate(240deg);
}
.slice:nth-child(6) {
background-color: #ffff00;
transform: rotate(300deg);
}
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-wheel">
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
</div>
<div class="outer-wheel">
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
</div>
<div class="button">抽奖</div>
</div>
<script>
var innerWheel = document.querySelector('.inner-wheel');
var outerWheel = document.querySelector('.outer-wheel');
var slices = document.querySelectorAll('.slice');
var button = document.querySelector('.button');
var angle = 0;
var rotation = 0;
var isSpinning = false;
button.addEventListener('click', function() {
if (!isSpinning) {
isSpinning = true;
angle = Math.floor(Math.random() * 360) + 1;
rotation = Math.floor(Math.random() * 360) + 1;
innerWheel.style.transform = 'rotate(' + angle + 'deg)';
outerWheel.style.transform = 'rotate(' + rotation + 'deg)';
setTimeout(function() {
isSpinning = false;
alert('恭喜您获得奖品!');
}, 4000);
}
});
</script>
</body>
</html>
```
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![apk](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)