java 抽奖中奖用什么类 javaweb抽奖_javascript

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

一：示例图

java 抽奖中奖用什么类 javaweb抽奖_前端_02

二：示例代码

<!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>

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

java 抽奖中奖用什么类 javaweb抽奖_javascript_03