html转盘抽签代码
时间: 2023-11-14 22:08:32 浏览: 268
以下是一个简单的 HTML 转盘抽签代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>转盘抽签</title>
<style type="text/css">
#roulette {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
}
#roulette img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center center;
transition: transform 5s ease-out;
}
</style>
</head>
<body>
<div id="roulette">
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
<img src="4.jpg" alt="4">
<img src="5.jpg" alt="5">
<img src="6.jpg" alt="6">
<img src="7.jpg" alt="7">
<img src="8.jpg" alt="8">
</div>
<button onclick="spin()">开始抽签</button>
<script type="text/javascript">
var roulette = document.getElementById('roulette');
var images = roulette.getElementsByTagName('img');
var angle = 0;
var index = 0;
function spin() {
index = Math.floor(Math.random() * images.length);
angle += 360 / images.length / 2 + (index * (360 / images.length));
roulette.style.transform = 'rotate(' + angle + 'deg)';
setTimeout(function() {
alert('恭喜你,抽中了 ' + images[index].alt + ' 号签!');
}, 5000);
}
</script>
</body>
</html>
```
该代码使用了 HTML、CSS 和 JavaScript 技术,实现了一个简单的转盘抽签功能。用户点击“开始抽签”按钮后,转盘会旋转一段时间,最终停在一个随机位置,弹出抽中的签号。
阅读全文