时间:2021-05-26
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) { //如果是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 = "开始" } }</script>效果预览
总结
以上所述是小编给大家介绍的JS+CSS实现随机点名,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS+CSS实现的感应鼠标渐变显示的DI
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下原生js实现随机点名,js部分有注释Document*{padding:0;margin
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:js+CSS弹出居中的背景半透明div
本文实例讲述了JS+CSS实现自动改变切换方向图片幻灯切换效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS+CSS自动改变切换方向的图
本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:一款JS+CSS淡入式焦点图片幻灯切换