HTML5幸運大轉盤抽獎網頁代碼
<html>
<head>
<title>幸運大轉盤抽獎</title>
<style>
#container {
width: 500px;
height: 500px;
position: relative;
}
.item {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<div class="item" style="background-color: #f00; transform: rotate(30deg);"></div>
<div class="item" style="background-color: #0f0; transform: rotate(60deg);"></div>
<div class="item" style="background-color: #00f; transform: rotate(90deg);"></div>
<div class="item" style="background-color: #f0f; transform: rotate(120deg);"></div>
<div class="item" style="background-color: #ff0; transform: rotate(150deg);"></div>
<div class="item" style="background-color: #0ff; transform: rotate(180deg);"></div>
<div class="item" style="background-color: #000; transform: rotate(210deg);"></div>
<div class="item" style="background-color: #888; transform: rotate(240deg);"></div>
</div>
<script>
function start() {
var randomAngle = Math.floor(Math.random() * 360);
var itemIndex = Math.floor(randomAngle / 45);
var rotateDeg = itemIndex * 45 + 22.5 + Math.floor(Math.random() * 22.5);
var rotateStr = "rotate(" + rotateDeg + "deg)";
document.getElementById("container").style.transform = rotateStr;
}
</script>
<button onclick="start()">開始抽獎</button>
</body>
</html>上述代碼實現了一個簡單的幸運大轉盤抽獎功能。首先，使用CSS樣式將8個扇形獎品塊放置于容器中，并設置它們的位置和樣式。然后，利用JavaScript函數start()實現抽獎過程，通過生成隨機角度來確定抽中哪一項，然后指定容器的transform屬性值實現轉盤轉動的效果。最后，添加一個按鈕，簡單地綁定start()函數即可實現抽獎操作。
上一篇html5廣告滾動代碼
下一篇vue排除部分css編譯