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 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
React中的Context应用场景分析
Jun 11 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
详谈Node.js之操作文件系统
2017/08/29 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
入党综合考察材料
2014/06/02 职场文书
个人整改方案范文
2014/10/25 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2014司机年终工作总结
2014/12/05 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
详解nodejs内置模块
2021/05/06 NodeJs
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript