js实现抽奖效果

Html

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;
}

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) {
            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';
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.1

立即下载

js实现抽奖效果



代码描述：原生js实现抽奖效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Osan6086

相关代码

js实现抽奖效果

最新