JavaScript实现随机点名器


Posted in Javascript onMarch 25, 2020

本文实例为大家分享了JavaScript实现随机点名器效果图的具体代码,供大家参考,具体内容如下

JavaScript实现随机点名器

js实现随机点名器的思路
利用setTimeout()计时器实现随机的效果,功能函数

function show(){
 var box=window.document.getElementById("box");
 var num=Math.floor((Math.random()*100000))%namelist.length;
 box.innerHTML=namelist[num];
 mytime=setTimeout("show()",1);
 }

完整代码如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>点击按钮随机点名-样式布局参考</title>
  <style type="text/css">  
   #box {
    margin: auto;
    width: 660px;
    font-size: 66px;
    height: 94px;
    color: #138eee;
    text-align: center;
    margin-top: 200px;
   }   
   #bt {
    margin: auto;
    width: 200px;
    text-align: center;
    margin-top: 75px;
    color: #fff;
    font-size: 25px;
    cursor: pointer;
   }
  </style>
   <script type="text/javascript">
   var namelist=["张三","李四","王五","赵六","孙七"];
 var mytime=null;
 
 function doit(){
 var bt=window.document.getElementById("bt");
 if(mytime==null){
  bt.innerHTML="停止";
  show();
 }
 else{
  bt.innerHTML="开始点名";
  clearTimeout(mytime);
  mytime=null;
 }
 }
 
 function show(){
 var box=window.document.getElementById("box");
 var num=Math.floor((Math.random()*100000))%namelist.length;
 box.innerHTML=namelist[num];
 mytime=setTimeout("show()",1);
 }
   </script>
 </head>
 <body id="bodybj" style="background-color: black;">
  <div id="box">亲,准备好点名了吗?</div>
  <div id="bt" onclick="doit()">开始点名</div>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
原生JS实现几个常用DOM操作API实例
Jan 19 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
vue写一个组件
Apr 09 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
小程序中手机号识别的示例
Dec 14 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 #Javascript
JavaScript实现多个物体同时运动
Mar 12 #Javascript
基于javascript实现碰撞检测
Mar 12 #Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 #Javascript
javascript实现拖拽碰撞检测
Mar 12 #Javascript
原生js实现碰撞检测
Mar 12 #Javascript
You might like
php 全局变量范围分析
2009/08/07 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
php分页代码学习示例分享
2014/02/20 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
关于php开启错误提示的总结
2019/09/24 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python多线程学习资料
2012/12/19 Python
Python查询IP地址归属完整代码
2017/06/21 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python解决八皇后问题示例
2018/04/22 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
军训教官感言
2014/03/02 职场文书
公司总经理岗位职责
2014/03/15 职场文书
房产委托公证书
2014/04/08 职场文书
厨房管理计划书
2014/04/27 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书