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 相关文章推荐
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
js+css3实现旋转效果
Jan 20 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 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
正则表达式语法
2006/10/09 Javascript
php+mysql分页代码详解
2008/03/27 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python编程入门的一些基本知识
2015/05/13 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python对html过滤处理的方法
2018/10/21 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
车间组长岗位职责
2013/12/20 职场文书
给护士表扬信
2014/01/19 职场文书
市级文明单位申报材料
2014/05/07 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
公司员工离职感言
2015/08/03 职场文书
《认识年月日》教学反思
2016/02/19 职场文书