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