你们好，最近小艾特发现有诸多的小伙伴们对于转盘抽奖软件下载，转盘抽奖这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 这里有三张抽奖图。请下载例子需要的图片，否则img在介绍图片时会出错。这个技术需要css html和JavaScript技术。原理很简单，详细步骤如下：

2、 ！-这是html源代码-

3、 !DOCTYPE html

4、 html lang='en'

5、 head

6、 meta charset='UTF-8'

7、 meta name='viewport' content='width=device-width, initial-scale=1.0'

8、 meta http-equiv='X-UA-Compatible' content='ie=edge'

9、 Title raffle/title

10、 link rel='stylesheet' href='./css/demo.css'

11、 /head

12、 body

13、 div class='stage'

14、 img id='turntable-bg' src='./img/lottery-turntable-bg.jpg' alt="'

15、 img id="turntable' src='./img/lottery-turntable.png' alt="'

16、 img id="pointer' src='./img/lottery-pointer.png' alt="'

17、 /div

18、 div class="infomation'

19、 氕抽奖次数：span id=' count span '/span button id=' count add '增加次数/button/button/h1

20、 div class='infomation-right'

21、 H4彩票记录/h4

22、 div id='look' class='look'/div

23、 /div

24、 /div

25、 script src='./js/demo.js'/script

26、 /body

27、 /html

28、 ！-这是css代码-

29、 h1,

30、 h2,

31、 h3,

32、 h4,

33、 h5,

34、 h6,

35、 p,

36、 body {

37、 padding: 0;

38、 margin: 0

39、 }

40、 .stage {

41、 width: 650px;

42、 margin: 0 auto;

43、 border: 1px solid black;

44、 position: relative

45、 }

46、 .stage img:nth-child(2) {

47、 position: absolute;

48、 top: 58px;

49、 left: 118px

50、 }

51、 .stage img:nth-child(3) {

52、 position: absolute;

53、 top: 147px;

54、 left: 260px;

55、 cursor: pointer

56、 }

57、 .infomation {

58、 width: 650px;

59、 margin: 0 auto

60、 }

61、 .infomation h1 {

62、 padding: 20px;

63、 display: inline-block;

64、 line-height: 30px

65、 }

66、 .infomation h1 button {

67、 padding: 1px;

68、 margin-left: 1rem

69、 }

70、 .infomation .infomation-right {

71、 width: 200px;

72、 height: 100px;

73、 float: right;

74、 text-align: center

75、 }

76、 .infomation .infomation-right .look {

77、 width: 200px;

78、 height: 100px;

79、 overflow: hidden;

80、 margin-top: 10px;

81、 border: 1px solid black

82、 }

83、 这里主要详细说一下JavaScript代码。我先把源代码发布给你，你可以照着源代码复制，先看看效果如何。

84、 ！- Javascript代码-

85、 window.onload=function () {

86、 var pointer=document.getElementById('pointer');

87、 var turntable=document.getElementById('turntable');

88、 var countAdd=document.getElementById('countAdd');

89、 var countSpan=document.getElementById('countSpan');

90、 var look=document.getElementById('look');

91、 var countSum=2;

92、 //初始化状态

93、 countReport=true//禁止用户疯狂的按钮；

94、 countSpan.innerHTML=countSum;

95、 look.scrollTop=look.scrollHeight;

96、 var ranLog={

97、 code: undefined,

98、 text: undefined,

99、 prize: undefined

100、 };

101、 function randFn() {

102、 var ran=Math.floor(Math.random() * 100);

103、 return ran;

104、 }

105、 function randIfFn(ran) {

106、 if (ran 2) {

107、 ranLog.code=1;

108、 ranLog.text='Premier Preis '

109、 ranLog.prize='免单4999元'

110、 } else if (ran 10) {

111、 ranLog.code=2;

112、 ranLog.text='二等奖'

113、 ranLog.prize='免单50元'

114、 } else if (ran 18) {

115、 ranLog.code=3;

116、 ranLog.text='三等奖'

117、 ranLog.prize='免单10元'

118、 } else if (ran 20) {

119、 ranLog.code=4;

120、 ranLog.text='四等奖'

121、 ranLog.prize='免单5元'

122、 } else if (ran 25) {

123、 ranLog.code=5;

124、 ranLog.text='五等奖'

125、 RanLog.prize='免分期服务费'

126、 } else if (ran 30) {

127、 ranLog.code=6;

128、 ranLog.text='六等奖'

129、 RanLog.prize='增加欠条金额'

130、 } else {

131、 ranLog.code=7;

132、 ranLog.text='不要这样'

133、 RanLog.prize='再抽一次，说不定就中奖了'

134、 }

135、 }

136、 function turnFn() {

137、 if (countReport==true) {

138、 countReport=false;

139、 var x=30 + (ranLog.code - 1) * (360/7) + 1080;

140、 turntable.style.transition='all 3s';

141、 turntable.style.transform='rotate(' + x + 'deg)';

142、 console.log(x)

143、 setTimeout(function () {

144、 lookFn();

145、 x=x - 1080;

146、 turntable.style.transition='all 0s';

147、 turntable.style.transform='rotate(' + x + 'deg)';

148、 console.log(x);

149、 countReport=true;

150、 }, 3000)

151、 }

152、 }

153、 function lookFn() {

154、 var lookp=document.createElement('p');

155、 if (ranLog.code==7) {

156、 lookp.innerHTML='很遗憾噢：' ranlog。文本“”ranlog。奖品；

157、 look.appendChild(lookp);

158、 look.scrollTop=look.scrollHeight;

159、 } else {

160、 lookp.innerHTML='恭喜你获得了：' ranlog。文本“”ranlog。奖品；

161、 look.appendChild(lookp);

162、 look.scrollTop=look.scrollHeight;

163、 }

164、 }

165、 pointer.onclick=function () {

166、 if (countSum 0) {

167、 if (countReport==true) {

168、 randIfFn(randFn())

169、 turnFn();

170、 countSum--;

171、 countSpan.innerHTML=countSum;

172、 }

173、 } else {

174、 }

175、 }

176、 countAdd.onclick=function () {

177、 if (countReport==true) {

178、 countSum++;

179、 var lookp=document.createElement('p');

180、 Lookp.innerHTML='您添加了抽奖机会'

181、 look.appendChild(lookp);

182、 countSpan.innerHTML=countSum;

183、 look.scrollTop=look.scrollHeight;

184、 } else {

185、 }

186、 }

187、 }

188、 ！-下一步是开始解析源代码-

189、 var pointer=document.getElementById('pointer');

190、 var turntable=document.getElementById('turntable');

191、 var countAdd=document.getElementById('countAdd');

192、 var countSpan=document.getElementById('countSpan');

193、 var look=document.getElementById('look');

194、 var count sum=2；给用户一个两次的默认彩票号码。

195、 countReport=true//禁止用户疯狂的按钮；

196、 count span . innerhtml=count sum；//在页面上显示默认的彩票号码。

197、 look . scroll top=look . scroll height；//这是刷新抽奖记录文本时滚动条将始终保持在底部的位置。

198、 var ranLog={

199、 code: undefined,

200、 text: undefined,

201、 prize: undefined

202、 };

203、 //这里我们将彩票代码、彩票价值、奖金初始化为未定义的值。

204、 function randFn() {

205、 var ran=Math.floor(Math.random() * 100);

206、 return ran;

207、 }

208、 //这里我们设置一个随机函数，是为中几个奖准备的。

209、 function randIfFn(ran) {

210、 if (ran 2) {

211、 ranLog.code=1;

212、 ranLog.text='Premier Preis '

213、 ranLog.prize='免单4999元'

214、 } else if (ran 10) {

215、 ranLog.code=2;

216、 ranLog.text='二等奖'

217、 ranLog.prize='免单50元'

218、 } else if (ran 18) {

219、 ranLog.code=3;

220、 ranLog.text='三等奖'

221、 ranLog.prize='免单10元'

222、 } else if (ran 20) {

223、 ranLog.code=4;

224、 ranLog.text='四等奖'

225、 ranLog.prize='免单5元'

226、 } else if (ran 25) {

227、 ranLog.code=5;

228、 ranLog.text='五等奖'

229、 ranLog.prize='免分期服务费'

230、 } else if (ran 30) {

231、 ranLog.code=6;

232、 ranLog.text='六等奖'

233、 ranLog.prize='提高白条额度'

234、 } else {

235、 ranLog.code=7;

236、 ranLog.text='没中奖'

237、 ranLog.prize='再抽一次，说不定能中奖'

238、 }

239、 }

240、 //这里我们传了参，把随机生成的数放在函数里面，然后用if判断来得到用户中了几等奖，然后用code，text，prize来把得到的值保存到变量当中

241、 function turnFn() {

242、 if (countReport==true) {

243、 countReport=false;

244、 var x=30 + (ranLog.code - 1) * (360/7) + 1080;

245、 turntable.style.transition='all 3s';

246、 turntable.style.transform='rotate(' + x + 'deg)';

247、 console.log(x)

248、 setTimeout(function () {

249、 lookFn();

250、 x=x - 1080;

251、 turntable.style.transition='all 0s';

252、 turntable.style.transform='rotate(' + x + 'deg)';

253、 console.log(x);

254、 countReport=true;

255、 }, 3000)

256、 }

257、 }

258、 //由于是是大转盘的原因，我们是转动这个圆盘，给用户们一个假象，每次点击抽奖，转盘都会转三秒，然后再把得到的奖项利用alert方法来弹出窗口，提示用户中了几等奖

259、 function lookFn() {

260、 var lookp=document.createElement('p');

261、 if (ranLog.code==7) {

262、 lookp.innerHTML='很遗憾噢：' + ranLog.text + '' + ranLog.prize;

263、 look.appendChild(lookp);

264、 look.scrollTop=look.scrollHeight;

265、 } else {

266、 lookp.innerHTML='恭喜你获得了：' + ranLog.text + '' + ranLog.prize;

267、 look.appendChild(lookp);

268、 look.scrollTop=look.scrollHeight;

269、 }

270、 }

271、 //这个函数是把抽奖得到东西把记录保存再抽奖记录的div中，并显示出抽奖记录再页面上

272、 pointer.onclick=function () {

273、 if (countSum 0) {

274、 if (countReport==true) {

275、 randIfFn(randFn())

276、 turnFn();

277、 countSum--;

278、 countSpan.innerHTML=countSum;

279、 }

280、 } else {

281、 alert('你没有抽奖次数');

282、 }

283、 }

284、 //这个函数是当用户点击抽奖这按钮时，如果用户的countSum的值小于0的时候，则提示用户没有抽奖次数

285、 countAdd.onclick=function () {

286、 if (countReport==true) {

287、 countSum++;

288、 var lookp=document.createElement('p');

289、 lookp.innerHTML='你增加了一次抽奖机会';

290、 look.appendChild(lookp);

291、 countSpan.innerHTML=countSum;

292、 look.scrollTop=look.scrollHeight;

293、 } else {

294、 alert('在转的过程中无法增加次数噢')

295、 }

296、 }

297、 //这个函数的意思是让玩家增加一次抽奖的机会，并把抽奖得到的东西显示到抽奖记录div页面上

298、 我来给大家做给总结吧：页面由三个图片，一个是转盘图片，一个是转盘背景图片，还有一个是让用户点击抽奖的按钮图片，当用户点击抽奖按钮的时候，页面的转盘就会转动起来，注意：背景是不会转的，只是转盘会转，

299、 指针也不会转。这里我们设置了一个定时器三秒钟的过渡时间，让转盘先转三秒，给用户一个假象，三秒钟之后，我们的转盘就会慢慢停止下来，然后把转盘的度数算好，时间一到，抽奖得到的东西会以弹框的形式显示出来，

300、 再以抽奖记录的方式显示再页面上。

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

以上就是转盘抽奖这篇文章的一些介绍，希望对大家有所帮助。