当前位置:首页 > 综合 > 正文内容

抽奖转盘网页版(抽奖转盘小程序)

2023-03-04 15:42:09综合790

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

1、 这里提供三张抽奖图片,示例需要的图片,请大家下载一下,不然img引入图片时会发生错误。此项技术需要用到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、 宽度:650像素

41、 边距:0自动;

42、 边框:1px纯黑;

43、 位置:相对

44、 }。阶段img:第n个子代(2) {

45、 位置:绝对;

46、 顶配:58px

47、 左:118像素

48、 }。阶段img:第n个子代(3) {

49、 位置:绝对;

50、 top:147 px;

51、 左:260像素

52、 光标:指针

53、 }。信息{

54、 宽度:650像素

55、 边距:0自动

56、 }。信息h1 {

57、 填充:20px

58、 显示:内嵌-块;

59、 行高:30px

60、 }。信息氕按钮{

61、 填充:1px

62、 左边距:1

63、 }。信息。信息-右侧{

64、 宽度:200像素

65、 高度:100像素

66、 浮动:对;

67、 文本对齐:居中

68、 }。信息。信息-好的。看{

69、 宽度:200像素

70、 高度:100像素

71、 溢出:隐藏;

72、 页边距-顶部:10px

73、 边框:1px纯黑

74、 }

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

76、 !- Javascript代码-

77、 window.onload=function () {

78、 var指针=文档。getelementbyid(“指针”);

79、 var转盘=文档。getelementbyid(“转盘”);

80、 var count add=文档。getelementbyid(“count add”);

81、 var count span=文档。getelementbyid(“count span”);

82、 var look=文档。getelementbyid(' look ');

83、 var count sum=2;

84、 //初始化状态

85、 countReport=true//禁止用户狂点按钮;

86、 计数跨度。innerhtml=count sum

87、 看啊。滚动顶部=看。滚动高度;

88、 var ranLog={

89、 代码:未定义,

90、 文本:未定义,

91、 奖品:未定义

92、 };

93、 函数randFn() {

94、 var ran=数学。地板(数学。random()* 100);

95、 返回冉;

96、 }

97、 函数randIfFn(ran) {

98、 if (ran 2) {

99、 运行日志。代码=1;

100、 ranLog.text='一等奖'

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

102、 } else if (ran 10) {

103、 兰格。代码=2;

104、 ranLog.text='二等奖'

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

106、 } else if (ran 18) {

107、 兰格。代码=3;

108、 ranLog.text='三等奖'

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

110、 } else if (ran 20) {

111、 兰格。代码=4;

112、 ranLog.text='四等奖'

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

114、 } else if (ran 25) {

115、 兰格。代码=5;

116、 ranLog.text='五等奖'

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

118、 } else if (ran 30) {

119、 兰格。代码=6;

120、 ranLog.text='六等奖'

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

122、 }否则{

123、 兰格。代码=7;

124、 ranLog.text='没中奖'

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

126、 }

127、 }

128、 函数turnFn() {

129、 if (countReport==true) {

130、 countReport=false

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

132、 转盘。风格。transition=“全是3”;

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

134、 控制台。对数(x)

135、 setTimeout(function () {

136、 lookFn();

137、 x=x-1080;

138、 turntable.style.transition='全0 '

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

140、 控制台。log(x);

141、 countReport=true

142、 }, 3000)

143、 }

144、 }

145、 函数lookFn() {

146、 var lookp=document。createelement(' p ');

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

148、 lookp.innerHTML='很遗憾噢:' ranlog。文本“”ranlog。奖品;

149、 看啊。appendchild(lookp);

150、 看啊。滚动顶部=看。滚动高度;

151、 }否则{

152、 lookp.innerHTML='恭喜你获得了:' ranlog。文本“”ranlog。奖品;

153、 看啊。appendchild(lookp);

154、 看啊。滚动顶部=看。滚动高度;

155、 }

156、 }

157、 pointer.onclick=function () {

158、 if (countSum 0) {

159、 if (countReport==true) {

160、 randIfFn(randFn())

161、 转fn();

162、 countSum-;

163、 计数跨度。innerhtml=count sum

164、 }

165、 }否则{

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

167、 }

168、 }

169、 countAdd.onclick=function () {

170、 if (countReport==true) {

171、 countSum

172、 var lookp=document。createelement(' p ');

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

174、 看啊。appendchild(lookp);

175、 计数跨度。innerhtml=count sum

176、 看啊。滚动顶部=看。滚动高度;

177、 }否则{

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

179、 }

180、 }

181、 }

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

183、 var指针=文档。getelementbyid(“指针”);

184、 var转盘=文档。getelementbyid(“转盘”);

185、 var count add=文档。getelementbyid(“count add”);

186、 var count span=文档。getelementbyid(“count span”);

187、 var look=文档。getelementbyid(' look ');

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

189、 countReport=true//禁止用户狂点按钮;

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

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

192、 var ranLog={

193、 代码:未定义,

194、 文本:未定义,

195、 奖品:未定义

196、 };

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

198、 函数randFn() {

199、 var ran=数学。地板(数学。random()* 100);

200、 返回冉;

201、 }

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

203、 函数randIfFn(ran) {

204、 if (ran 2) {

205、 运行日志。代码=1;

206、 ranLog.text='一等奖'

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

208、 } else if (ran 10) {

209、 兰格。代码=2;

210、 ranLog.text='二等奖'

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

212、 } else if (ran 18) {

213、 兰格。代码=3;

214、 ranLog.text='三等奖'

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

216、 } else if (ran 20) {

217、 兰格。代码=4;

218、 ranLog.text='四等奖'

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

220、 } else if (ran 25) {

221、 兰格。代码=5;

222、 ranLog.text='五等奖'

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

224、 } else if (ran 30) {

225、 兰格。代码=6;

226、 ranLog.text='六等奖'

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

228、 }否则{

229、 兰格。代码=7;

230、 ranLog.text='没中奖'

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

232、 }

233、 }

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

235、 函数turnFn() {

236、 if (countReport==true) {

237、 countReport=false

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

239、 转盘。风格。transition=“全是3”;

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

241、 控制台。对数(x)

242、 setTimeout(function () {

243、 lookFn();

244、 x=x-1080;

245、 turntable.style.transition='全0 '

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

247、 控制台。log(x);

248、 countReport=true

249、 }, 3000)

250、 }

251、 }

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

253、 函数lookFn() {

254、 var lookp=document。createelement(' p ');

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

256、 lookp.innerHTML='很遗憾噢:' ranlog。文本“”ranlog。奖品;

257、 看啊。appendchild(lookp);

258、 看啊。滚动顶部=看。滚动高度;

259、 }否则{

260、 lookp.innerHTML='恭喜你获得了:' ranlog。文本“”ranlog。奖品;

261、 看啊。appendchild(lookp);

262、 看啊。滚动顶部=看。滚动高度;

263、 }

264、 }

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

266、 pointer.onclick=function () {

267、 if (countSum 0) {

268、 if (countReport==true) {

269、 randIfFn(randFn())

270、 转fn();

271、 countSum-;

272、 计数跨度。innerhtml=count sum

273、 }

274、 }否则{

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

276、 }

277、 }

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

279、 countAdd.onclick=function () {

280、 if (countReport==true) {

281、 countSum

282、 var lookp=document。createelement(' p ');

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

284、 看啊。appendchild(lookp);

285、 计数跨度。innerhtml=count sum

286、 看啊。滚动顶部=看。滚动高度;

287、 }否则{

288、 Alert('您不能在传输过程中增加次数')

289、 }

290、 }

291、 //这个功能意味着玩家可以增加一次抽奖的机会,并在抽奖记录的div页面显示从抽奖中获得的东西。

292、 我给大家总结一下:页面由三张图片组成,一张是转盘的图片,一张是转盘背景的图片,一张是用户点击抽奖的按钮的图片。当用户点击抽奖按钮时,页面的转盘就会转动。注意:背景不会转,转盘会转,指针不会转。这里我们设置一个过渡时间为三秒的定时器,让转盘旋转三秒,给用户一种错觉。三秒钟后,我们的转盘会慢慢停下来,然后计算转盘的度数。到时候抽奖获得的东西会以盒子的形式展示出来,然后以抽奖记录的形式展示在页面上。

293、 内容纯属手游。如果你认为边肖踢得很好,我希望给小白一个赞美和支持。注意边肖。我会一直为你更新网页前面的东西,然后更新旋转木马,放大镜等JavaScript原生特效!

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

扫描二维码推送至手机访问。

版权声明:文章内容摘自网络,如果无意之中侵犯了您的版权,请联系本站,本站将在3个工作日内删除。谢谢!

本文链接:http://xixia168.cn/n/zh/272154.html

标签: 转盘
分享给朋友:

“抽奖转盘网页版(抽奖转盘小程序)” 的相关文章

关于比菲力的介绍(比菲力)

关于比菲力的介绍(比菲力)

大家好,小编小月来为大家解答这个问题。比菲力,关于比菲力的介绍很多人还不知道,现在让我们一起来看看吧!1、比菲力,“RRY 比力”,源自美国著名的比弗利山庄(Beverly Hills)一个凝结极致奢华生活方式的地方。2、同时“RY ”意为“E VERY…”追求卓越的生活态度。这篇文章到此就结束,希...

关于电子加速器辐照的介绍(电子加速器辐照)

关于电子加速器辐照的介绍(电子加速器辐照)

大家好,小编毛毛来为大家解答这个问题。电子加速器辐照,关于电子加速器辐照的介绍很多人还不知道,现在让我们一起来看看吧!1、辐射加工是指将电子加速器(0.2MeV~10MeV)产生的电子线(β射线)或放射性同位素(Cs-137或Co-60)产生的γ射线的能量转移给被辐照物质,电离辐射作用到被辐照的物质...

关于西安通信学院学报的介绍(西安通信学院学报)

关于西安通信学院学报的介绍(西安通信学院学报)

大家好,小编小花来为大家解答这个问题。西安通信学院学报,关于西安通信学院学报的介绍很多人还不知道,现在让我们一起来看看吧!1、本刊坚持为社会主义服务的方向,坚持以马克思列宁主义、毛泽东思想和邓小平理论为指导,贯彻“百花齐放、百家争鸣”和“古为今用、洋为中用”的方针。2、坚持实事求是、理论与实际相结合...

关于博毅的介绍(博毅)

关于博毅的介绍(博毅)

大家好,小编小新来为大家解答这个问题。博毅,关于博毅的介绍很多人还不知道,现在让我们一起来看看吧!1、博毅,本名岩科,男。2、佤族,生日是10月5日,现居住在北京。3、身高176厘米,体重64公斤,是一名歌手兼作曲家。这篇文章到此就结束,希望能帮助到大家。...

关于东达的介绍(东达)

关于东达的介绍(东达)

大家好,小编小新来为大家解答这个问题。东达,关于东达的介绍很多人还不知道,现在让我们一起来看看吧!1、东达集团是中国环境保护产业协会副会长单位,所属三大板块,42家企业。2、东达水务、大连国家生态工业示范园区、大连环境交易所是集团板块重要的组成部分。3、运营所在城市污染减排贡献率均在50%以上,为辽...

关于mt18i的介绍(mt18i)

关于mt18i的介绍(mt18i)

大家好,小编小鸥来为大家解答这个问题。mt18i,关于mt18i的介绍很多人还不知道,现在让我们一起来看看吧!1、中文类免费网络电话。这篇文章到此就结束,希望能帮助到大家。...