JavaScript实现随机点名器的完整代码与思路

作者:异步漫步时间:2026-10-23 16:32:21浏览:357

本文介绍如何使用JavaScript实现一个随机点名器。核心思路是利用setTimeout()计时器配合Math.random()生成随机索引,从而在页面上快速滚动显示名单中的名字。文章提供了包含HTML结构、CSS样式及JavaScript逻辑的完整代码示例,可直接复制使用,适合前端初学者参考学习。

随机点名器实现概述

本文分享了一个使用JavaScript编写的随机点名器实例,包含具体的实现代码,供读者参考学习。

随机点名器实现概述

核心实现思路

实现随机点名器的核心逻辑如下: 利用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>

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

作者最新文章