<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="//at.alicdn.com/t/font_3392244_n6ydl9671h8.js"></script>
<style type="text/css">
.icon {
width: 100px;
height: 100px;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
#big{
width: 714px;
height: 500px;
margin: 0 auto;
}

#top,#bottom{
display: flex;
flex-direction: row;
}

#top div,#left div,#right div,#bottom div{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #B2DFEE;
box-sizing: border-box;
border: 1px solid gray;
}

#middle{
display: flex;
flex-direction: row;
}

#left,#right{
display: flex;
flex-direction: column;
}

#center{
width: 500px;
height: 300px;
background-color:#458B00;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
}
#center div{
width: 120px;
height: 40px;
background-color: #F2F3F4;
text-align: center;
line-height: 42px;
border-radius: 10px;
font-size: 18px;
}
#show{
width: 400px;
height: 240px;
position: absolute;
top:135px;
left: 450px;
background-color: #6495ED;
display: none;
}

#sure{
width: 120px;
height: 40px;
background-color: #F2F3F4;
text-align: center;
line-height: 42px;
border-radius: 10px;
font-size: 18px;
position: absolute;
bottom: 10px;
left:140px;
}

#win{
position: absolute;
left:150px;
top:60px;
}

</style>
</head>
<body>


<div id="big">
<div id="top">
<div id="first">
<svg class="icon" aria-hidden="true" >
<use xlink:href="#icon-shanzhu"></use>
</svg>
</div>
<div>
<svg class="icon " aria-hidden="true">
<use xlink:href="#icon-icon-test"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-jiangbeijianglishengliwancheng"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xihongshishuiguotiandian"></use>
</svg>
</div>
<div>
<svg class="icon icon2" aria-hidden="true">
<use xlink:href="#icon-shanzhu"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shuiguo"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shuiguopingguo"></use>
</svg>
</div>
</div>

<div id=middle>
<div id=left>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shuiguopingguo"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-li"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-putao"></use>
</svg>
</div>
</div>

<div id="center">
<div id="begin">开始抽奖</div>
<div id="reset">重置</div>
</div>

<div id=right>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-li"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-putao"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shengxian-shuiguo"></use>
</svg>
</div>
</div>

</div>

<div id="bottom">
<div>
<svg class="icon" aria-hidden="true" >
<use xlink:href="#icon-a-jiangbeijianglishengliwancheng"></use>
</svg>
</div>
<div>
<svg class="icon " aria-hidden="true">
<use xlink:href="#icon-shanzhu"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shuiguopingguo"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xihongshishuiguotiandian"></use>
</svg>
</div>
<div>
<svg class="icon icon2" aria-hidden="true">
<use xlink:href="#icon-shanzhu"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-shuiguo"></use>
</svg>
</div>
<div>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-icon-test"></use>
</svg>
</div>
</div>

<div id="show">
<div id="win">

</div>
<div id="sure">确定</div>
</div>

</div>

<script type="text/javascript">

var first=document.getElementById("first");
first.style.border="4px solid #660066";

var nodes=[];
var top1=document.getElementById("top");
top1.firstElementChild.border="4px solid #660066";
for (var i = 0; i < top1.children.length; i++) {
nodes.push(top1.children[i]);
}

var right1=document.getElementById("right");
for (var i = 0; i < right1.children.length; i++) {
nodes.push(right1.children[i]);
}


var bottom1=document.getElementById("bottom");
for (var i = bottom1.children.length-1; i>=0; i--) {
nodes.push(bottom1.children[i]);
}

var left1=document.getElementById("left");
for (var i = left1.children.length-1; i>=0; i--) {
nodes.push(left1.children[i]);
}

var begin1=document.getElementById("begin");
var show1=document.getElementById("show");
var index=0;
begin1.onclick=function(){
//第一段快速滚动5-10秒结束
//第二段慢速滚动 3-6秒结束

var beginTime1=new Date().getTime();
var rand1=Math.floor(Math.random()*3)+2;
var rand2=Math.floor(Math.random()*2)+3;

var beginInterval=setInterval(()=>{
var endTime1=new Date().getTime();

if((endTime1-beginTime1)>rand1*1000){
clearInterval(beginInterval);

var beginTime2=new Date().getTime();
var slowlyInterval=setInterval(()=>{
var endTime2=new Date().getTime();
if((endTime2-beginTime2)>rand2*1000){
clearInterval(slowlyInterval);
show1.style.display="inherit";
var win1=document.getElementById("win");
win1.innerHTML=nodes[index].innerHTML;
}
if(index==nodes.length){
nodes[index-1].style.border="1px solid gray";
index=0;
}

if(index==0){
nodes[index].style.border="4px solid #660066";
}else{

nodes[index].style.border="4px solid #660066";
nodes[index-1].style.border="1px solid gray";

}
console.log(index);
index++;

},600);
}

if(index==nodes.length){
nodes[index-1].style.border="1px solid gray";
index=0;
}

if(index==0){
nodes[index].style.border="4px solid #660066";
}else{

nodes[index].style.border="4px solid #660066";
nodes[index-1].style.border="1px solid gray";
}
console.log(index);
index++;
},50);

}
var sure1=document.getElementById("sure");
sure1.onclick=function(){
show1.style.display="none";
}
var reset1 = document.getElementById("reset");
reset1.onclick = function(){
window.location.reload();
}
</script>
</body>
</html>