JavaWeb案例：抽奖小游戏

当当当当~~~~快来一起学习吧，今天我们一起做一个抽奖小游戏

一：示例图

二：示例代码

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><title>抽奖</title><style>#screen{display: inline-block;height: 100px;width: 100px;text-align: center;line-height: 100px;background: burlywood;}</style></head>
<body>
<!--抽奖屏幕背景-->
<div><span id="screen"></span>
</div>
<!--开始和结束按钮-->
<div><input type="button" value="开始" id="start" ><input type="button" value="结束" id="stop">
</div><script type = 'text/javascript'>//获取按钮var start = document.getElementById('start'),stop = document.getElementById('stop'),screen = document.getElementById('screen');// 抽奖奖品var goods = ['小米手环' , 'Mac笔记本' , '双开门冰箱'  , '谢谢参与' , '厨房三件套'];var index = 0;// 这里将time定义在外面因为还有其他环境要使用到var time = null;//开始单击事件start.onclick = function(){//按钮无法继续运转start.disabled = true;//设置定时器//setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。time = setInterval(function(){index++;if(index > goods.length-1){index=0;}screen.innerText = goods[index];},100);}//停止单击事件stop.onclick = function(){//按钮可以继续运转start.disabled = false;//注意这里不能拿到time因为它是局部变量，解决方法：将time定义到外面//取消设置的定时器clearInterval(time);}
</script>
</body>
</html>

以上就是抽奖小游戏的内容啦，希望我的文章对你有所帮助，如果有错误的地方还望大家批评指正，谢谢大家阅读!

JavaWeb案例：抽奖小游戏相关推荐

python设计抽奖游戏球_python3实现小球转动抽奖小游戏
最近老师在讲 tkinter,所以我做了一个抽奖小游戏. 一.效果图先上效果图.红色的小球会围绕蓝色小球做环形运动.我设置的四个角是奖品,其余的都是再接再厉. 二.方法基于tkinter中的but ...
android 数字滚动抽奖_2020年会必备，Excel轻松制作抽奖小游戏
不知不觉就到了年底,新的一年即将从明天开始.时光流逝,不禁让人感慨万千. 当然在这个时间大家应都在期待着年终奖.年会吧.今天我想和大家分享一个Excel制作的抽奖小游戏,可以一次抽一人也可以一次抽多人 ...
步骤分解：教你五步实现css转盘抽奖小游戏
教你五步实现css转盘抽奖小游戏先看一下整体效果. 分解思路: 第一步:先画一个园这里是class="box"代码段第二步:在圆上面再画一个圆圈,加点阴影效果,有那么点立体的 ...
利用js实现抽奖小游戏
这次依然是大大的js干货,不知道大家有没有看到过类似下面这种抽奖小游戏: 这种小游戏实现的原理是什么呢?我们该怎样使用学习过的js知识来实现这个小游戏呢?你别一看到"利用js实现游戏&quo ...
HTML5小游戏-简单抽奖小游戏
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
用Python实现一个轮盘抽奖小游戏~
点击上方"码农的后花园",选择"星标" 公众号精选文章,第一时间送达 Python提供了许多个图像开发界面的库,比如现在主流的Tkinter.wxPython ...
HBuilder制作英雄皮肤抽奖小游戏
用HBuilder制作英雄皮肤抽奖小游戏,主要用到"轮播图"和"定时器",至于"轮播图"和"定时器" 是什么,请自行百度 ...
用python3写一个小球转动的抽奖小游戏
最近老师在讲 tkinter,所以我做了一个抽奖小游戏一.效果图先上效果图.红色的小球会围绕蓝色小球做环形运动.我设置的四个角是奖品,其余的都是再接再厉. 二.方法基于tkinter中的butt ...
使用 cocos creator 3.0 制作抽奖小游戏
使用 cocos creator 3.0 制作抽奖小游戏描述一个抽奖小游戏demo, 点击抽奖按钮进行抽奖, 抽完奖后该结果置灰.下一次抽奖就会跳过已经抽过的奖项. 注意: 每次点击抽奖按钮 ...

JavaWeb案例：抽奖小游戏

一：示例图

二：示例代码

JavaWeb案例：抽奖小游戏相关推荐

最新文章

热门文章