HTML轉(zhuǎn)盤抽獎(jiǎng)代碼是一個(gè)web開發(fā)中比較常見的應(yīng)用，它可以增加網(wǎng)頁(yè)交互性，吸引用戶參與。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽獎(jiǎng)轉(zhuǎn)盤</title>
<style>
#rouletteContainer {
width: 300px;
height: 300px;
background: url(roulette-bg.png) no-repeat;
background-size: contain;
position: relative;
margin: 0 auto;
}
#rouletteWheel {
width: 100%;
height: 100%;
position: absolute;
transform-origin: center center;
transition: transform 8s;
}
.prize {
position: absolute;
top: 60px;
left: 60px;
width: 180px;
height: 180px;
background: url(prize.png) no-repeat;
background-size: contain;
}
#spinBtn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: green;
padding: 10px 20px;
border-radius: 5px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="rouletteContainer">
<img src="spin.png" id="spinBtn" onclick="startSpin()">
<img src="prize1.png" class="prize" id="prize1">
<img src="prize2.png" class="prize" id="prize2">
<img src="prize3.png" class="prize" id="prize3">
<img src="prize4.png" class="prize" id="prize4">
<img src="prize5.png" class="prize" id="prize5">
<img src="prize6.png" class="prize" id="prize6">
<img src="prize7.png" class="prize" id="prize7">
<img src="prize8.png" class="prize" id="prize8">
<img src="prize9.png" class="prize" id="prize9">
<img src="roulette.png" id="rouletteWheel">
</div>
<script>
var wheel = document.getElementById('rouletteWheel');
var spinBtn = document.getElementById('spinBtn');
var prizes = document.querySelectorAll('.prize');
var deg = 0;
function startSpin() {
spinBtn.onclick = null;
deg = Math.floor(Math.random() * 360) + 360 * 5;
wheel.style.transform = 'rotate(' + deg + 'deg)';
wheel.addEventListener('transitionend', showPrize);
}
function showPrize() {
var prizeIndex = Math.floor((360 - deg % 360) / (360 / prizes.length));
var prize = prizes[prizeIndex];
alert('恭喜您獲得了' + prize.id);
wheel.removeEventListener('transitionend', showPrize);
spinBtn.onclick = startSpin;
}
</script>
</body>
</html>以上是一個(gè)簡(jiǎn)單的HTML轉(zhuǎn)盤抽獎(jiǎng)代碼，通過(guò)使用CSS實(shí)現(xiàn)轉(zhuǎn)盤的樣式和獎(jiǎng)品的展示，使用JavaScript實(shí)現(xiàn)轉(zhuǎn)盤轉(zhuǎn)動(dòng)、停止和中獎(jiǎng)信息提示的功能，可以自己修改獎(jiǎng)品圖片和中獎(jiǎng)提示信息，增加代碼的交互性。