<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js随机文字抽奖代码</title>
<style>
*{margin: 0;padding: 0}
.title{width: 200px;height: 50px;margin: 0 auto;font-size: 20px;color: red;margin-top: 30px;font-weight: bold; padding-left: 140px;}
.bs{width: 200px;margin: 0 auto;}
.bs span{display: inline-block;width: 60px;background-color: #708098;color: #fff;height: 30px;line-height: 30px;text-align: center;margin-left: 33px;border-radius: 5px;cursor: pointer; font-family: '微软雅黑';}
</style>
</head>
<body>
<div class="main">
<div class="title">开始抽奖啦！！！</div>
<div class="bs">
<span class="begin">开 始</span>
<span class="stop">停 止</span>
</div>
</div>
</body>
<script>
//定义一个数组变量存放几个数据，一个定时器，一个标识变量
var data=['ipad mini','iphone 6','iphone 6s玫瑰金','kindle','ipad air','超极本'],
timer=null,
flag=0;
//封装一个方法拿到 通过class拿到的标签 注意拿到的时候是个数组对象，记得最后[0]，取一下第一个对象
function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName('*');
for(var i=0;i<elements.length;i++){
if(elements[i].className == clsName){
eles.push(elements[i]);
}
}
return eles;
}
//函数开始
window.onload=function(){
var oTitle=getByClass('title')[0],
begin=getByClass('begin')[0],
stop=getByClass('stop')[0];
//开始抽奖
begin.onclick=fnplay;
stop.onclick=fnstop;
//键盘事件 针对的是整个document
document.onkeyup=fnkey;
function fnplay(){
//var that=this;//这里指的是begin这个按钮 这里暂时不考虑这个。
//每个开始之前关闭一下定时器，不然每次按click的时候容易加快速度，以至于整个浏览器容易奔溃
clearInterval(timer);
//定义一个定时器
timer=setInterval(function(){
//Math.random()拿到的是0-1之前的数字，去乘数组的长度 再取整数可以拿到想要的数组下标
var random=Math.floor(Math.random()*data.length); //floor去取整
//把拿到的数组的值写进去
oTitle.innerHTML=data[random];
},50);
//按开始之后，让颜色改变一下
begin.style.background="#999";
}
function fnstop(){
clearInterval(timer);
//恢复为原来的颜色
begin.style.background="#708098";
}
function fnkey(event){
console.log(event.keyCode);
event=event ||window.event;
if(event.keyCode == 13){ //当按下回车键的时候
//一开始是0的状态，我们改变。
if(flag == 0){
fnplay();
//设置为1的状态，停止改变
flag =1;
}else{
fnstop();
flag=0;
}
}
}
}
</script>
</html>
