抽奖转盘（抽奖转盘安装视频）

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

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

2、 !- 这是超文本标记语言源码-

3、 !声明文档类型

4、 html lang='en '

5、 头

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、 标题抽奖/标题

10、 链接版本='样式表href=' ./css/demo.css '

11、 /头

12、 身体

13、 div class='stage '

14、 img id='turntable-bg' src=' ./img/彩票-转盘-BG。jpg ' alt=" "

15、 img id='转盘' src=' ./img/彩票-转盘。png ' alt=" "

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

17、 /div

18、 div class='信息'

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

20、 div class='信息-右'

21、 h4抽奖记录/h4

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

23、 /div

24、 /div

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

26、 /body

27、 /html

28、 !- 这是钢性铸铁代码-

29、 h1，

30、 h2，

31、 h3，

32、 h4，

33、 h5，

34、 h6，

35、 p，

36、 正文{

37、 填充：0;

38、 边距：0

39、 }

40、 .舞台{

41、 宽度：650像素

42、 边距：0自动；

43、 边框：1px纯黑；

44、 位置：相对

45、 }

46、 .阶段img:第n个子代(2) {

47、 位置：绝对；

48、 顶配：58px

49、 左：118像素

50、 }

51、 .阶段img:第n个子代(3) {

52、 位置：绝对；

53、 top:147 px；

54、 左：260像素

55、 光标：指针

56、 }

57、 .信息{

58、 宽度：650像素

59、 边距：0自动

60、 }

61、 .信息h1 {

62、 填充：20px

63、 显示：内嵌-块；

64、 行高：30px

65、 }

66、 .信息氕按钮{

67、 填充：1px

68、 左边距：1

69、 }

70、 .信息。信息-右侧{

71、 宽度：200像素

72、 高度：100像素

73、 浮动：对；

74、 文本对齐：居中

75、 }

76、 .信息。信息-好的。看{

77、 宽度：200像素

78、 高度：100像素

79、 溢出：隐藏；

80、 页边距-顶部：10px

81、 边框：1px纯黑

82、 }

83、 这里我们主要细说Java脚本语言代码，我先将源码放出来给大家，大家可以按照源码来复制，先看看效果如何

84、 !- Javascript代码-

85、 window.onload=function () {

86、 var指针=文档。getelementbyid(“指针”)；

87、 var转盘=文档。getelementbyid(“转盘”)；

88、 var count add=文档。getelementbyid(“count add”)；

89、 var count span=文档。getelementbyid(“count span”)；

90、 var look=文档。getelementbyid(' look ')；

91、 var count sum=2；

92、 //初始化状态

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

94、 计数跨度。innerhtml=count sum

95、 看啊。滚动顶部=看。滚动高度；

96、 var ranLog={

97、 代码：未定义，

98、 文本：未定义，

99、 奖品：未定义

100、 };

101、 函数randFn() {

102、 var ran=数学。地板(数学。random()* 100)；

103、 返回冉；

104、 }

105、 函数randIfFn(ran) {

106、 if (ran 2) {

107、 运行日志。代码=1；

108、 ranLog.text='一等奖'

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

110、 } else if (ran 10) {

111、 兰格。代码=2；

112、 ranLog.text='二等奖'

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

114、 } else if (ran 18) {

115、 兰格。代码=3；

116、 ranLog.text='三等奖'

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

118、 } else if (ran 20) {

119、 兰格。代码=4；

120、 ranLog.text='四等奖'

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

122、 } else if (ran 25) {

123、 兰格。代码=5；

124、 ranLog.text='五等奖'

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

126、 } else if (ran 30) {

127、 兰格。代码=6；

128、 ranLog.text='六等奖'

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

130、 }否则{

131、 兰格。代码=7；

132、 ranLog.text='没中奖'

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

134、 }

135、 }

136、 函数turnFn() {

137、 if (countReport==true) {

138、 countReport=false

139、 var x=30(ranlog。代码-1)*(360/7)1080；

140、 转盘。风格。transition=“全是3”；

141、 转盘。风格。transform=' rotate(' x ' deg)'；

142、 控制台.对数(x)

143、 setTimeout(function () {

144、 lookFn()；

145、 x=x-1080；

146、 turntable.style.transition='全0 ';

147、 转盘。风格。transform=' rotate(' x ' deg)'；

148、 控制台。log(x)；

149、 countReport=true

150、 }, 3000)

151、 }

152、 }

153、 函数lookFn() {

154、 var lookp=document。createelement(' p ')；

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

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

157、 看啊。appendchild(lookp)；

158、 看啊。滚动顶部=看。滚动高度；

159、 }否则{

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

161、 看啊。appendchild(lookp)；

162、 看啊。滚动顶部=看。滚动高度；

163、 }

164、 }

165、 pointer.onclick=function () {

166、 if (countSum 0) {

167、 if (countReport==true) {

168、 randIfFn(randFn())

169、 转fn()；

170、 countSum-；

171、 计数跨度。innerhtml=count sum

172、 }

173、 }否则{

174、 警报('你没有抽奖次数');

175、 }

176、 }

177、 countAdd.onclick=function () {

178、 if (countReport==true) {

179、 countSum

180、 var lookp=document。createelement(' p ')；

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

182、 看啊。appendchild(lookp)；

183、 计数跨度。innerhtml=count sum

184、 看啊。滚动顶部=看。滚动高度；

185、 }否则{

186、 警报('在转的过程中无法增加次数噢')

187、 }

188、 }

189、 }

190、 !- 下面步骤开始解析源码-

191、 var指针=文档。getelementbyid(“指针”)；

192、 var转盘=文档。getelementbyid(“转盘”)；

193、 var count add=文档。getelementbyid(“count add”)；

194、 var count span=文档。getelementbyid(“count span”)；

195、 var look=文档。getelementbyid(' look ')；

196、 var count sum=2；给用户一个默认的抽奖次数为两次

197、 countReport=true//禁止用户狂点按钮；

198、 计数跨度。innerhtml=count sum//将默认的抽奖次数显示到页面上

199、 看啊。滚动顶部=看。滚动高度；//这里是让抽奖记录文本刷新的时候滚动条永远保持再底部

200、 var ranLog={

201、 代码：未定义，

202、 文本：未定义，

203、 奖品：未定义

204、 };

205、 //这里我们初始化抽奖编码代码，抽奖值，奖项为未定义的值

206、 函数randFn() {

207、 var ran=数学。地板(数学。random()* 100)；

208、 返回冉；

209、 }

210、 //这里我们设置一个随机函数，是为了抽几等奖准备的

211、 函数randIfFn(ran) {

212、 if (ran 2) {

213、 运行日志。代码=1；

214、 ranLog.text='一等奖'

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

216、 } else if (ran 10) {

217、 兰格。代码=2；

218、 ranLog.text='二等奖'

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

220、 } else if (ran 18) {

221、 兰格。代码=3；

222、 ranLog.text='三等奖'

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

224、 } else if (ran 20) {

225、 兰格。代码=4；

226、 ranLog.text='四等奖'

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

228、 } else if (ran 25) {

229、 兰格。代码=5；

230、 ranLog.text='五等奖'

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

232、 } else if (ran 30) {

233、 兰格。代码=6；

234、 ranLog.text='六等奖'

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

236、 }否则{

237、 兰格。代码=7；

238、 ranLog.text='没中奖'

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

240、 }

241、 }

242、 //这里我们传了参，把随机生成的数放在函数里面，然后用如果判断来得到用户中了几等奖，然后用代码、文本、奖励来把得到的值保存到变量当中

243、 函数turnFn() {

244、 if (countReport==true) {

245、 countReport=false

246、 var x=30(ranlog。代码-1)*(360/7)1080；

247、 转盘。风格。transition=“全是3”；

248、 转盘。风格。transform=' rotate(' x ' deg)'；

249、 控制台.对数(x)

250、 setTimeout(function () {

251、 lookFn()；

252、 x=x-1080；

253、 turntable.style.transition='全0 ';

254、 转盘。风格。transform=' rotate(' x ' deg)'；

255、 控制台。log(x)；

256、 countReport=true

257、 }, 3000)

258、 }

259、 }

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

261、 函数lookFn() {

262、 var lookp=document。createelement(' p ')；

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

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

265、 看啊。appendchild(lookp)；

266、 看啊。滚动顶部=看。滚动高度；

267、 }否则{

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

269、 看啊。appendchild(lookp)；

270、 看啊。滚动顶部=看。滚动高度；

271、 }

272、 }

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

274、 pointer.onclick=function () {

275、 if (countSum 0) {

276、 if (countReport==true) {

277、 randIfFn(randFn())

278、 转fn()；

279、 countSum-；

280、 计数跨度。innerhtml=count sum

281、 }

282、 }否则{

283、 警报('你没有抽奖次数');

284、 }

285、 }

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

287、 countAdd.onclick=function () {

288、 if (countReport==true) {

289、 countSum

290、 var lookp=document。createelement(' p ')；

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

292、 看啊。appendchild(lookp)；

293、 计数跨度。innerhtml=count sum

294、 看啊。滚动顶部=看。滚动高度；

295、 }否则{

296、 Alert('转发过程中不能增加次数')

297、 }

298、 }

299、 //这个函数的意思是为玩家增加一次抽奖的机会，将抽奖结果显示在抽奖记录的div页面上。

300、 我给大家总结一下：页面由三张图片组成，一张是转盘图片，一张是转盘背景图片，一张是供用户点击抽奖的按钮图片。当用户点击抽奖按钮时，页面的转盘就会转动。注意：背景不会转，转盘会转，指针不会转。这里我们设置一个三秒过渡时间的定时器，让转盘先旋转三秒，给用户一种错觉。三秒钟后，我们的转盘会慢慢停下来，然后计算转盘的度数。时间到了，抽奖结果会以子弹框的形式显示出来，然后作为抽奖记录显示在页面上。

301、 内容纯手写。如果你认为边肖踢得很好，我希望给小白一个赞扬和支持。关注下一个边肖，我会一直为你更新网页前端的东西。稍后我会更新旋转木马，放大镜等JavaScript原生特效！

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