这里提供三张抽奖图片，示例需要的图片，请大家下载一下，不然img引入图片时会发生错误。此项技术需要用到css html 和JavaScript技术。原理很简单，详细步骤请看如下：

h1,h2,h3,h4,h5,h6,p,body {padding: 0;margin: 0}.stage {width: 650px;margin: 0 auto;border: 1px solid black;position: relative}.stage img:nth-child(2) {position: absolute;top: 58px;left: 118px}.stage img:nth-child(3) {position: absolute;top: 147px;left: 260px;cursor: pointer}.infomation {width: 650px;margin: 0 auto}.infomation h1 {padding: 20px;display: inline-block;line-height: 30px}.infomation h1 button {padding: 1px;margin-left: 1rem}.infomation .infomation-right {width: 200px;height: 100px;float: right;text-align: center}.infomation .infomation-right .look {width: 200px;height: 100px;overflow: hidden;margin-top: 10px;border: 1px solid black}

这里我们主要细说JavaScript代码,我先将源码放出来给大家，大家可以按照源码来复制，先看看效果如何window.onload = function () {var pointer = document.getElementById('pointer');var turntable = document.getElementById('turntable');var countAdd = document.getElementById('countAdd');var countSpan = document.getElementById('countSpan');var look = document.getElementById('look');var countSum = 2;//初始化状态countReport = true; //禁止用户狂点按钮;countSpan.innerHTML = countSum;look.scrollTop = look.scrollHeight;var ranLog = {code: undefined,text: undefined,prize: undefined};function randFn() {var ran = Math.floor(Math.random() * 100);return ran;}function randIfFn(ran) {if (ran < 2) {ranLog.code = 1;ranLog.text = '一等奖'ranLog.prize = '免单4999元'} else if (ran < 10) {ranLog.code = 2;ranLog.text = '二等奖'ranLog.prize = '免单50元'} else if (ran < 18) {ranLog.code = 3;ranLog.text = '三等奖'ranLog.prize = '免单10元'} else if (ran < 20) {ranLog.code = 4;ranLog.text = '四等奖'ranLog.prize = '免单5元'} else if (ran < 25) {ranLog.code = 5;ranLog.text = '五等奖'ranLog.prize = '免分期服务费'} else if (ran < 30) {ranLog.code = 6;ranLog.text = '六等奖'ranLog.prize = '提高白条额度'} else {ranLog.code = 7;ranLog.text = '没中奖'ranLog.prize = '再抽一次，说不定能中奖'}}function turnFn() {if (countReport == true) {countReport = false;var x = 30 + (ranLog.code - 1) * (360 / 7) + 1080;turntable.style.transition = 'all 3s';turntable.style.transform = 'rotate(' + x + 'deg)';console.log(x)setTimeout(function () {lookFn();x = x - 1080;turntable.style.transition = 'all 0s';turntable.style.transform = 'rotate(' + x + 'deg)';console.log(x);countReport = true;}, 3000)}}function lookFn() {var lookp = document.createElement('p');if (ranLog.code == 7) {lookp.innerHTML = '很遗憾噢:' + ranLog.text + '' + ranLog.prize;look.appendChild(lookp);look.scrollTop = look.scrollHeight;} else {lookp.innerHTML = '恭喜你获得了:' + ranLog.text + '' + ranLog.prize;look.appendChild(lookp);look.scrollTop = look.scrollHeight;}}pointer.onclick = function () {if (countSum > 0) {if (countReport == true) {randIfFn(randFn())turnFn();countSum--;countSpan.innerHTML = countSum;}} else {alert('你没有抽奖次数');}}countAdd.onclick = function () {if (countReport == true) {countSum++;var lookp = document.createElement('p');lookp.innerHTML='你增加了一次抽奖机会';look.appendChild(lookp);countSpan.innerHTML = countSum;look.scrollTop=look.scrollHeight;} else {alert('在转的过程中无法增加次数噢')}}}

var pointer = document.getElementById('pointer');var turntable = document.getElementById('turntable');var countAdd = document.getElementById('countAdd');var countSpan = document.getElementById('countSpan');var look = document.getElementById('look');var countSum = 2; 给用户一个默认的抽奖次数为两次countReport = true; //禁止用户狂点按钮;countSpan.innerHTML = countSum;//将默认的抽奖次数显示到页面上look.scrollTop = look.scrollHeight;//这里是让抽奖记录文本刷新的时候滚动条永远保持再底部首先我们用getElementById拿到dom对象

var ranLog = {code: undefined,text: undefined,prize: undefined};//这里我们初始化抽奖编码code，抽奖值，奖项为未定义的值

function randFn() {var ran = Math.floor(Math.random() * 100);return ran;}//这里我们设置一个随机函数，是为了抽几等奖准备的

function randIfFn(ran) {if (ran < 2) {ranLog.code = 1;ranLog.text = '一等奖'ranLog.prize = '免单4999元'} else if (ran < 10) {ranLog.code = 2;ranLog.text = '二等奖'ranLog.prize = '免单50元'} else if (ran < 18) {ranLog.code = 3;ranLog.text = '三等奖'ranLog.prize = '免单10元'} else if (ran < 20) {ranLog.code = 4;ranLog.text = '四等奖'ranLog.prize = '免单5元'} else if (ran < 25) {ranLog.code = 5;ranLog.text = '五等奖'ranLog.prize = '免分期服务费'} else if (ran < 30) {ranLog.code = 6;ranLog.text = '六等奖'ranLog.prize = '提高白条额度'} else {ranLog.code = 7;ranLog.text = '没中奖'ranLog.prize = '再抽一次，说不定能中奖'}}//这里我们传了参，把随机生成的数放在函数里面，然后用if判断来得到用户中了几等奖，然后用code，text，prize来把得到的值保存到变量当中

function turnFn() {if (countReport == true) {countReport = false;var x = 30 + (ranLog.code - 1) * (360 / 7) + 1080;turntable.style.transition = 'all 3s';turntable.style.transform = 'rotate(' + x + 'deg)';console.log(x)setTimeout(function () {lookFn();x = x - 1080;turntable.style.transition = 'all 0s';turntable.style.transform = 'rotate(' + x + 'deg)';console.log(x);countReport = true;}, 3000)}}//由于是是大转盘的原因，我们是转动这个圆盘，给用户们一个假象，每次点击抽奖，转盘都会转三秒，然后再把得到的奖项利用alert方法来弹出窗口，提示用户中了几等奖

function lookFn() {var lookp = document.createElement('p');if (ranLog.code == 7) {lookp.innerHTML = '很遗憾噢:' + ranLog.text + '' + ranLog.prize;look.appendChild(lookp);look.scrollTop = look.scrollHeight;} else {lookp.innerHTML = '恭喜你获得了:' + ranLog.text + '' + ranLog.prize;look.appendChild(lookp);look.scrollTop = look.scrollHeight;}}//这个函数是把抽奖得到东西把记录保存再抽奖记录的div中，并显示出抽奖记录再页面上

pointer.onclick = function () {if (countSum > 0) {if (countReport == true) {randIfFn(randFn())turnFn();countSum--;countSpan.innerHTML = countSum;}} else {alert('你没有抽奖次数');}}//这个函数是当用户点击抽奖这按钮时，如果用户的countSum的值小于0的时候，则提示用户没有抽奖次数

countAdd.onclick = function () {if (countReport == true) {countSum++;var lookp = document.createElement('p');lookp.innerHTML='你增加了一次抽奖机会';look.appendChild(lookp);countSpan.innerHTML = countSum;look.scrollTop=look.scrollHeight;} else {alert('在转的过程中无法增加次数噢')}}//这个函数的意思是让玩家增加一次抽奖的机会，并把抽奖得到的东西显示到抽奖记录div页面上

我来给大家做给总结吧：页面由三个图片，一个是转盘图片，一个是转盘背景图片，还有一个是让用户点击抽奖的按钮图片，当用户点击抽奖按钮的时候，页面的转盘就会转动起来，注意：背景是不会转的，只是转盘会转，指针也不会转。这里我们设置了一个定时器三秒钟的过渡时间，让转盘先转三秒，给用户一个假象，三秒钟之后，我们的转盘就会慢慢停止下来，然后把转盘的度数算好，时间一到，抽奖得到的东西会以弹框的形式显示出来，再以抽奖记录的方式显示再页面上。

内容纯属手打，如果大家觉得小编打的好，希望给小白点个赞支持一下，关注下小编，我会一直更新网页前端的东西给大家，后续会更新轮播图，放大镜等JavaScript原生各种特效！