js實現大轉盤抽獎活動
阿新 • • 發佈：2019-05-12
cli absolute script time poi nsf for tag .com
一、建立html頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="author" content="熊仔其人"> <title>轉盤抽獎效果</title> <!-- 這裏是css部分 --> <style> #bg{ width: 650px; height: 600px; margin: 0 auto; background: url(turntable-bg.jpg) no-repeat; position: relative; } img[src^="pointer"] { position: absolute; z-index: 10; top: 155px; left: 247px; } img[src^="turntable"] { position: absolute; z-index: 5; top: 60px; left: 116px; transition: all 4s; } </style> </head> <body> <!-- 這裏是HTML結構部分 --> <div id="bg"><img src="pointer.png" alt="pointer"><img src="turntable.png" alt="turntable"></div> <!-- 這裏是js部分 --> <script> var oPointer = document.getElementsByTagName("img")[0]; var oTurntable = document.getElementsByTagName("img")[1]; var cat = 51.4; //總共7個扇形區域，每個區域約51.4度 var num = 0; //轉圈結束後停留的度數 var offOn = true; //是否正在抽獎 oPointer.onclick = function () { if (offOn) { oTurntable.style.transform = "rotate(0deg)"; offOn = !offOn; ratating(); } } //旋轉 function ratating() { var timer = null; var rdm = 0; //隨機度數 clearInterval(timer); timer = setInterval(function () { if (Math.floor(rdm / 360) < 3) { rdm = Math.floor(Math.random() * 3600); } else { oTurntable.style.transform = "rotate(" + rdm + "deg)"; clearInterval(timer); setTimeout(function () { offOn = !offOn; num = rdm % 360; if (num <= cat * 1) { alert("4999元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "4999元"); } else if (num <= cat * 2) { alert("50元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "50元"); } else if (num <= cat * 3) { alert("10元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "10元"); } else if (num <= cat * 4) { alert("5元"); console.log("rdm=" + rdm + "，num=" + num + "，" + "5元"); } else if (num <= cat * 5) { alert("免息服務"); console.log("rdm=" + rdm + "，num=" + num + "，" + "免息服務"); } else if (num <= cat * 6) { alert("提交白金"); console.log("rdm=" + rdm + "，num=" + num + "，" + "提交白金"); } else if (num <= cat * 7) { alert("未中獎"); console.log("rdm=" + rdm + "，num=" + num + "，" + "未中獎"); } }, 4000); } }, 30); } </script> </body> </html>
二、引入圖片
1、pointer.png
2、turntable.png
3、turntable-bg.jpg
js實現大轉盤抽獎活動