- it
- js实现随机点名
HTML代码结构
<body
>
<div id
="box">随机点名
</div
>
<span id
="span">开始
</span
>
</body
>
CSS代码结构
<style
>
#box
{
width
: 30%;
height
: 200px
;
background
-color
: rgb(233, 248, 214);
border
: 1px solid
rgb(130, 216, 18);
font
-size
: 40px
;
font
-weight
: 600;
font
-family
: Arial
, Helvetica
, sans
-serif
;
line
-height
: 200px
;
text
-align
: center
;
margin
: 25px auto
;
border
-radius
: 10px
;
}
span
{
display
: block
;
width
: 30%;
height
: 44px
;
line
-height
: 44px
;
background
-color
: rgb(6, 158, 64);
border
-radius
: 10px
;
color
: #fff
;
text
-align
: center
;
margin
: 0 auto
;
font
-size
: 18px
;
font
-family
: 华文细黑
;
}
span
:hover
{
background
-color
: rgb(4, 190, 76);
}
</style
>
JS代码结构
<script
>
var arr
= ["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "司马懿", "孙策", "元歌", "米莱狄", "狂铁", "弈星", "裴擒虎",
"杨玉环", "公孙离", "明世隐", "女娲", "梦奇", "苏烈", "百里玄策", "百里守约", "铠", "鬼谷子", "干将莫邪", "东皇太一", "大乔", "黄忠", "诸葛亮",
"哪吒", "太乙真人", "蔡文姬", "雅典娜", "杨戬", "成吉思汗", "钟馗", "虞姬", "李元芳", "张飞", "刘备", "后羿", "牛魔", "孙悟空", "亚瑟", "橘右京",
"娜可露露", "不知火舞", "张良", "花木兰", "兰陵王", "王昭君", "韩信", "刘邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蝉", "关羽", "老夫子",
"武则天", "项羽", "达摩", "狄仁杰", "马可波罗", "李白", "宫本武藏", "典韦", "曹操", "甄姬", "夏侯惇", "周瑜", "吕布", "芈月", "白起", "扁鹊",
"孙膑", "钟无艳", "阿轲", "高渐离", "刘禅", "庄周", "鲁班七号", "孙尚香", "嬴政", "妲己", "墨子", "赵云", "小乔", "廉颇"
]
var box
= document
.getElementById("box");
var span
= document
.getElementById("span");
var state
= 0;
var t
;
span
.onclick
= function
() {
if (state
== 0) {
clearInterval(t
);
t
= setInterval(function
() {
var sj
= Math
.round(Math
.random() * (arr
.length
- 1));
console
.log(arr
[sj
]);
box
.innerHTML
= arr
[sj
];
}, 3)
span
.innerHTML
= "结束"
state
=1;
}else{
state
=0;
clearInterval(t
);
span
.innerHTML
= "开始"
}
}
</script
>
效果预览
