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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
多重?l件?合查?(二)
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
php旋转图片90度的方法
2013/11/07 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
Scrapy的简单使用教程
2017/10/24 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
浅谈Python 函数式编程
2020/06/20 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
客户表扬信范文
2014/01/10 职场文书
高中英语教学反思
2014/02/04 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
结对共建工作方案
2014/06/02 职场文书
公司副总经理任命书
2014/06/05 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android