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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
PHP中的session安全吗?
2016/01/22 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
初识Node.js
2014/09/03 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
详细介绍Python语言中的按位运算符
2013/11/26 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
关于Python解包知识点总结
2020/05/05 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
公司法人授权委托书范本
2014/09/12 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
python非标准时间的转换
2021/07/25 Python