原生js随机点名
- Faker
- clearlove
- theShy
- uzi
- 微笑
- 韦神
- Gogoing
- Ambition
- Froggen
- Madlife
* {
padding:0;
margin:0;
}
.content-bg {
width:1365px;
background:url(http://www.jq22.com/img/cs/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;
}
更新时间:2020-05-24 23:47:50
随机选择一个元素,并把它放入左边排行榜;
选中之后不会再次选中该元素,声明一个数组来存去所有li的下标,随机选中之后就使用splice删除数组中该元素,不影响下一次其他元素的选择
按钮自动聚焦,进入页面可直接通过键盘空格键进行控制开始和暂停,下面的按钮可换成英雄联盟的字体图标,效果更好
我也是萌新小白,希望大家一起共同学习