帮助中心

纯css和原生js随机点名

浏览：379次- 评论：0次- 发布时间：2019-05-27

Html

Css


    
        原生js随机点名
        
            Faker
            clearlove
            theShy
            uzi
            微笑
            韦神
            Gogoing
            Ambition
            Froggen
            Madlife
        
        
        
            Rank巅峰榜

* {
	padding:0;
	margin:0;
}
.content-bg {
	width:1365px;
	background:url(http://www.sucainiu.com/themes/images/demo/500x300-1.png) no-repeat;
	background-size:cover;
	height:650px;
	background-clip:content-box;
}
.content {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:100%;
	height:650px;
	text-align:center;
	margin:0 auto;
	background:rgba(255,255,255,0.3);
}
ul {
	list-style:none;
	width:620px;
	margin:0 auto;
	overflow:hidden;
}
li {
	float:left;
	width:100px;
	border-radius:10px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	text-align:center;
	line-height:50px;
	background-color:skyblue;
	border:1px solid #333333;
	margin:10px;
	font-weight:bold;
}
button {
	display:block;
	border-radius:10px;
	width:80px;
	height:50px;
	margin:0 auto;
	background:transparent;
	color:skyblue;
	border:none;
	font-size:22px;
	color:red;
}
button:hover {
	cursor:pointer;
}
.active {
	background-color:slateblue;
}
.active2 {
	background-color:red;
}
.text {
	position:absolute;
	left:100px;
	top:50px;
	text-align:left;
	font-weight:bold;
	line-height:30px;
}
h1 {
	margin-bottom:50px;
}

var btn = document.getElementsByTagName("button")[0];
 var lis = document.getElementsByTagName("li");
 var text = document.getElementsByClassName("text")[0];
 var h1 = document.getElementsByTagName("h1")[0];
 //按钮默认聚焦,可直接鼠标空格键控制
 btn.focus();

var num = 0;
 var rank = 0;
 var tag = true;
 var t = null;
 var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

btn.onclick = function() {
     if (arr.length < 1) {
         alert("下一个传说就是你");
         h1.innerText = "联盟等你来战";
     }
     //如果tag:1,开始随机选择
     else if (tag) {
         h1.innerText = "面对疾风吧";
         t = setInterval(function() {
             num = Math.floor(Math.random() * arr.length);
             for (var i = 0; i < lis.length; i++) {
                 lis[i].className = '';
             }
             lis[arr[num]].className = 'active';
             btn.style.color = "purple"
         }, 100);
         tag = false;
     }
     //如果tag:0,停止定时器,并改变选中元素的颜色,并把该元素的下标从数组中剔除
     else {
         clearInterval(t);
         rank++;
         lis[arr[num]].style.backgroundColor = 'red';
         text.innerHTML += rank + "丶" + lis[arr[num]].innerText + '</br>';
         arr.splice(num, 1);
         console.log(num)
         btn.style.color = "red";
         tag = true;
     }
 }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3