原生JS随机文字抽奖代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是原生JS随机文字抽奖代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS随机文字抽奖代码下载</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/getlucky.js"></script>
</head>
<body>
<div class="main">
	<div class="title">开始抽奖啦！！！</div>
	<div class="bs">
		<span class="begin">开  始</span>
		<span class="stop">停  止</span>
	</div>
</div>
</body>
</html>

JS代码(getlucky.js):

//定义一个数组变量存放几个数据，一个定时器，一个标识变量var data=['ipad mini','iphone 6','iphone 6s玫瑰金','kindle','ipad air','超极本'],timer=nullflag=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;
	//键盘事件 针对的是整个documentdocument.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;
}
}
}
}

CSS代码(main.css):

*{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:'微软雅黑';}

附件:下载该文件资源,减少时间成本(增值服务)