抽奖转盘制作

利用html css和原生JavaScript来制作一个简单的抽奖系统，原理很简单。详细请看如下操作

这里提供三张抽奖图片，示例需要的图片，请大家下载一下，不然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原生各种特效！