抽奖HTML代码分享

zzb0927 发表于:2018-10-20 10:46 阅读: 212次

现在每次年会上,免不了要进行抽奖环节,公司让自己开发一个简易的抽奖程序,现在开发完分享出来供大家免费使用,可以在这个基础上修改。

HTML代码:

        <div id="title" class="title">开始抽奖啦!</div>
        <div class="btns">
            <span id="play">开 始</span>
            <span id="stop">停 止</span>
        </div>

JS代码(具体逻辑)

//定义一个数组,里面存可能抽到的情况
var data = ['Phone5', '谢谢参与', 'Ipad', '谢谢参与', '三星笔记本', '谢谢参与', '佳能相机', '谢谢参与', '惠普打印机', '谢谢参与', '谢谢参与', '50元充值卡', '谢谢参与', '1000元超市购物券'],
    timer = null,
    flag = 0;

window.onload = function() {
    var play = document.getElementById('play'),
        stop = document.getElementById('stop');

    //鼠标事件
    play.onclick = playFun; //开始抽奖
    stop.onclick = stopFun; //结束抽奖

    // 键盘事件
    document.onkeyup = function(event) {
        event = event || window.event;
        if(event.keyCode == 13) { //判断键盘敲击的是否是enter(13表示enter)
            /*当输入enter,触发键盘事件,判断如果flag=0,则进行抽奖,并将此时的flag自动置为1,当flag=1时,结束抽奖,将此时的flag置为0*/
            if(flag == 0) {
                playFun();
                flag = 1;
            } else {
                stopFun();
                flag = 0;
            }
        }
    }
}

function playFun() {
    var title = document.getElementById('title');
    var play = document.getElementById('play');
    clearInterval(timer);
    timer = setInterval(function() {
        var random = Math.floor(Math.random() * data.length);
        title.innerHTML = data[random];
    }, 50);
    play.style.background = '#999';
}

function stopFun() {
    clearInterval(timer);
    var play = document.getElementById('play');
    play.style.background = '#036';
}

CSS代码(样式):

*{margin:0; padding:0;}
.title{width:400px; height:70px; margin:0 auto; padding-top:30px; text-align:center; font-size:24px; font-weight:bold; color:#F00;}
.btns{width:190px; height:30px; margin:0 auto;}
.btns span{display:block; float:left; width:80px; height:27px; line-height:27px; background:#036; border:1px solid #eee; border-radius:7px; margin-right:10px; color:#FFF; text-align:center; font-size:14px; font-family:"微软雅黑"; cursor:pointer;}
酷码派 [KuMaPai.COM] - 陕ICP备18010024号-2