JS+CSS实现随机点名(实例代码)


Posted in Javascript onNovember 04, 2019

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实现随机点名(实例代码)

总结

以上所述是小编给大家介绍的JS+CSS实现随机点名,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery的三种$()
Dec 30 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
JS立即执行的匿名函数用法分析
Nov 04 #Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 #Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 #Javascript
JavaScript判断浏览器版本的方法
Nov 03 #Javascript
You might like
php数据库抽象层 PDO
2011/05/07 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
微信JS接口大全
2016/08/25 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Python中list初始化方法示例
2016/09/18 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
成教毕业生自我鉴定
2013/10/23 职场文书
建筑专业毕业生推荐信
2013/11/21 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
开幕式邀请函
2015/01/31 职场文书
天坛导游词
2015/02/02 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
无线电知识基础入门篇
2022/02/18 无线电
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技