js实现简单抽奖功能

本文实例为大家分享了js实现简单抽奖功能的具体代码,供大家参考,具体内容如下

代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style>

#box{

border: 1px solid aqua;

height: 100px;

width: 200px;

text-align: center;

line-height: 100px;

margin: auto;

font-size: 22px;

}

.active{

background: slateblue;

}

li{

text-align: center;

list-style:none ;

width: 40px;

height: 20px;

line-height: 20px;

border: 1px solid blue;

margin-left: 40px;

float: left;

}

ul,li

{

list-style: none;

}

#shu

{

margin: auto;

}

</style>

</head>

<body>

<button id="stp">开始</button><button id="off">停止</button>

<div id="box">恭喜<span>1</span>号 </div>

<div id="shu">0</div><span>等奖</span>

<ul>

<li class="active">1号</li>

<li>2号</li>

<li>3号</li>

<li>4号</li>

<li>5号</li>

<li>6号</li>

<li>7号</li>

</ul>

<script>

var t=null;

var ostp=document.getElementById("stp");

var ooff=document.getElementById("off");

var ospan=document.getElementsByTagName("div")[0].getElementsByTagName("span");

var oli=document.getElementsByTagName("ul")[0].getElementsByTagName("li");

var oshu=document.getElementsByClassName("shu");

function mytime(){

var n=Math.floor(Math.random()*7+1);

ospan[0].innerText=n;

ospan[1].innerText=oli[n-1].innerText;

for(let i=0;i<oli.length;i++)

{

oli[i].className="";

}

oli[n-1].className="active";

}

function mytime2()

{

var a=Math.floor(Math.random()*3+1);

shu.innerText=a;

}

ostp.onclick=function(){

clearInterval(t);

t=setInterval(mytime,50);

at=setInterval(mytime2,1000)

}

ooff.onclick=function(){

clearInterval(t);

clearInterval(at);

}

</script>

</body>

</html>

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 js实现简单抽奖功能 的全部内容, 来源链接: utcz.com/p/217851.html

回到顶部