css
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 20px auto;
width: 1000px;
height: 400px;
background: url(1.jpg) no-repeat 100% 100%;
background-size: cover;
color: black;
}
ul,
li {
list-style: none;
}
ul {
width: 600px;
height: 100px;
background: lightgreen;
margin: 0 auto;
}
ul li {
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background: lightgoldenrodyellow;
margin: 20px;
}
button {
width: 100px;
height: 50px;
margin: 180px 450px;
;
}
</style>
body
<body>
<div class="container">
<ul class="wrap-ul">
<li class="wrap-li">
</li>
<li class="wrap-li">
</li>
<li class="wrap-li">
</li>
<li class="wrap-li">
</li>
</ul>
<button>抽奖</button>
</div>
<script>
var nameArr = [
"旋涡鸣人",
"宇智波佐助",
"迈克凯",
"旗木卡卡西"
];
var liObj = document.getElementsByClassName("wrap-li");
for (let i = 0; i < nameArr.length; i++) {
liObj[i].innerHTML = nameArr[i]; //循环给li标签里面赋值
}
var buttonObj = document.getElementsByTagName("button")[0]; //获取按钮
buttonObj.onclick = function () { //给按钮添加事件
for (let i = 0; i < liObj.length; i++) {
liObj[i].style.color = "black";
liObj[i].style.background = "lightgoldenrodyellow";
//点击把样式变成改变之前的样子
}
var num = Math.floor(Math.random() * 4); //生成下表0-3
//点击改变样式
liObj[num].style.color = "blueviolet";
liObj[num].style.background = "lightpink";
}
</script>
</body>
抽奖系统.png
网友评论