随机点名器的实现

末蓝、 2023-05-29 09:28 34阅读 0赞

所有代码如下：  
css样式可自行修改

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>点名器</title>
    	<style>
    		body { 
    			text-align: center;
    			background-color: white;
    		}
    		#box { 
    			text-align: center;
    			margin: auto;
    			width: 660px;
    			font-size: 66px;
    			height: 94px;
    			line-height: 94px;
    			color: deepskyblue;
    		}
    		#bt { 
    			width: 200xp;
    			color: skyblue;
    			text-align: center;
    			margin: 75px auto;
    			cursor: pointer;
    		}
    	</style>
    </head>
    
    <body>
    	<script>
    		var namelist=["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"];
    		var mytime=null;
    		function doit() { 
    		//起初mytime非空
    			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>
    	<h3 id="box">亲，你准备好了吗？</h3>
    	<br><br>
    	<div onClick="doit()" id="bt">开始点名</div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java实现随机点名器

细节1：假设班级有5名同学，每轮中的每一位同学只能被点到一次，程序运行五次，第一轮点名结束。* 细节2：第6次运行的时候，我们自己不需要手动操作本地文件，要求...

╰半夏微凉°/ 2024年04月22日 05:20/ 0 赞/ 100 阅读

相关 JavaScript实现随机点名器

JavaScript实现随机点名器效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

淩亂°似流年/ 2023年07月13日 08:14/ 0 赞/ 28 阅读

相关 js随机点名器（简单）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

今天药忘吃喽~/ 2023年06月23日 01:54/ 0 赞/ 34 阅读

相关 js随机点名器（简单）

附源代码; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

太过爱你忘了你带给我的痛/ 2023年06月22日 20:03/ 0 赞/ 363 阅读

相关随机点名器的实现

所有代码如下： css样式可自行修改 <!doctype html> <html> <head> <meta charset="utf-8

末蓝、/ 2023年05月29日 09:28/ 0 赞/ 35 阅读

相关 js 随机点名器

\\ js网页点击按钮开始随机点名\\ <!DOCTYPE html> <html lang="en"> <head> <met

灰太狼/ 2022年12月28日 11:15/ 0 赞/ 277 阅读

相关 java随机点名器_基于JavaScript实现随机点名器

本文实例为大家分享了JavaScript实现随机点名器的具体代码，供大家参考，具体内容如下 ![f46872aa473bc95877c4e3ec6875cd15.gif][]

灰太狼/ 2022年11月07日 15:56/ 0 赞/ 314 阅读

相关 JAVA基础随机点名器案例

1.1 案例介绍随机点名器，即在全班同学中随机的找出一名同学，打印这名同学的个人信息。此案例在我们昨天课程学习中，已经介绍，现在我们要做的是对原有的案例进

妖狐艹你老母/ 2022年07月15日 18:41/ 0 赞/ 292 阅读

相关 Java随机点名器案例

随机点名器，即在全班同学中随机的打印出一名同学的名字。要做到随机点名，需要具备 ①存储所有的同学姓名 ②显示全班同学姓名 ③随机点名其中的一个人，打印到控制台。需要涉及

待我称王封你为后i/ 2022年05月28日 00:50/ 0 赞/ 286 阅读

相关练习：随机点名器案例

/ 随机点名器 1.存储所有学生姓名,添加功能 2.预览所有学生姓名,遍历数组,浏览功能 3.随机数作为索引,到数组中找到

以你之姓@/ 2022年05月08日 18:36/ 0 赞/ 274 阅读