animate html 抽獎代碼可以讓你在網(wǎng)頁上實現(xiàn)一個簡單的抽獎功能。下面是代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽獎</title>
</head>
<body>
<div id="lottery">
</div>
<script>
$(document).ready(function() {
var box = $('#lottery');
var arr = ['一等獎', '二等獎', '三等獎', '感謝參與'];
var color = ['#FF0000', '#00FF00', '#0000FF', '#000000'];
var count = arr.length;
var num = 0;
function lottery() {
var random = Math.floor(Math.random() * count);
box.html(arr[random]);
box.css("color", color[random]);
}
var timer;
$('#start').click(function() {
clearInterval(timer);
timer = setInterval(function() {
num++;
if (num >= 100) {
clearInterval(timer);
num = 0;
lottery();
}
}, 20);
});
$('#stop').click(function() {
clearInterval(timer);
num = 0;
lottery();
});
});
</script>
<button id="start">開始抽獎</button>
<button id="stop">停止</button>
</body>
</html>以上代碼實現(xiàn)了一個簡單的抽獎功能，將需要抽獎的獎品名稱和對應(yīng)的顏色分別存入數(shù)組中，然后通過隨機(jī)數(shù)在數(shù)組中取出一個元素，并將其顯示在頁面上，并且獎品的字體顏色與數(shù)組顏色一一對應(yīng)。通過定時器來達(dá)到旋轉(zhuǎn)抽獎效果，當(dāng)停止按鈕被點(diǎn)擊時，定時器會清空，使抽中的獎品停留在頁面上。整個過程使用了animate方法，使頁面動態(tài)展示，增強(qiáng)了交互性和視覺效果。
上一篇c 插入html代碼