html用css实现随机类名,JS+CSS实现随机点名(实例代码)

HTML代码结构

随机点名

开始

CSS代码结构

#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);

}

JS代码结构

var arr = ["西施", "马超", "曜", "云中君", "瑶", "猪八戒", "嫦娥", "伽罗", "盾山", "司马懿", "孙策", "元歌", "米莱狄", "狂铁", "弈星", "裴擒虎",

"杨玉环", "公孙离", "明世隐", "女娲", "梦奇", "苏烈", "百里玄策", "百里守约", "铠", "鬼谷子", "干将莫邪", "东皇太一", "大乔", "黄忠", "诸葛亮",

"哪吒", "太乙真人", "蔡文姬", "雅典娜", "杨戬", "成吉思汗", "钟馗", "虞姬", "李元芳", "张飞", "刘备", "后羿", "牛魔", "孙悟空", "亚瑟", "橘右京",

"娜可露露", "不知火舞", "张良", "花木兰", "兰陵王", "王昭君", "韩信", "刘邦", "姜子牙", "露娜", "程咬金", "安琪拉", "貂蝉", "关羽", "老夫子",

"武则天", "项羽", "达摩", "狄仁杰", "马可波罗", "李白", "宫本武藏", "典韦", "曹操", "甄姬", "夏侯惇", "周瑜", "吕布", "芈月", "白起", "扁鹊",

"孙膑", "钟无艳", "阿轲", "高渐离", "刘禅", "庄周", "鲁班七号", "孙尚香", "嬴政", "妲己", "墨子", "赵云", "小乔", "廉颇"

]

var box = document.getElementById("box");

var span = document.getElementById("span");//获取元素

var state = 0;//定义状态，开始和结束

var t;

span.onclick = function () {

if (state == 0) {

//如果是0即开始随机，变为1时结束，不是0时执行else

clearInterval(t);

t = setInterval(function () {

// console.log(1);

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 = "开始"

}

}

效果预览

总结

以上所述是小编给大家介绍的JS+CSS实现随机点名，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对IIS7站长之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！