网页版――用html编写一个抽奖转盘

本文主要是介绍网页版――用html编写一个抽奖转盘，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML编写一个抽奖转盘

以下是所有代码：HTML、css

  <!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.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.png" alt="pointer"><img src="turntable.png.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>