轻松看懂js点名器

逃离我推掉我的手 2022-12-22 15:26 90阅读 0赞

**css代码**

<style type="text/css">
    		.showName { 
    			width: 400px;
    			height: 200px;
    			border:2px solid #ccc;
    			margin:100px auto 0px;
    			text-align: center;
    			line-height: 200px;
    			font-size: 32px;
    		}
    
    		#btn { 
    			display: block;
    			margin: 20px auto;
    			font-size: 32px;
    		}
    	</style>

<div class="showName">苗苗1班</div>
    <button id="btn">开始</button>

**js代码**

<script type="text/javascript">
    
    	var getRandName = (function(){ 
    			               // 所有人名--字符串形式
    							var str_names = '张三，李四，王五，赵六，田七，景八，小米，小明，小红'
    							// 所有人名--数组形式
    							var arr_names = str_names.split(',')
    							// m~n的随机数
    							function rand(m, n){ 
    								return m + Math.round( Math.random()*(n-m) )
    							}
    
    							return function(){ 
    										// 随出数一个下标
    										var index = rand(0, arr_names.length-1)
    										return arr_names[ index ] 
    									}
    						}())
    
    	var showName = document.querySelector('.showName')
    	
    
    	// 定时器对象
    	var timeObj = (function(){ 
    						var timeId
    						function start(){ 
    							timeId = setInterval(()=>{ 
    								showName.innerHTML = getRandName()
    							},100)
    						}
    						function stop(){ 
    
    							clearInterval(timeId)
    						}
    						return { start:start, stop:stop}
    					}())
    	
    	// 开始按钮
    	var btn = document.querySelector('#btn')
    	var flag = false
    	btn.onclick = function(){ 
    		flag = !flag
    
    		if (flag) { 
    			timeObj.start()
    			this.innerHTML = '暂停'
    		} else { 
    			timeObj.stop()
    			this.innerHTML = '开始'
    		}
    
    	}
    </script>

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关班级点名器！

点名器： 1、题目利用定时器的原理写出一个简单的班级点名器，样式自拟，实现功能即可！思路与写法：（1）、拿到一个案例，我们首先要写出html的页面结构来，

爱被打了一巴掌/ 2023年01月15日 03:39/ 0 赞/ 118 阅读

相关 jq 点名器

jq 点名器(可以参考我js点名器的) <!DOCTYPE html> <html lang="en"> <head> <meta

缺乏、安全感/ 2022年12月29日 06:36/ 0 赞/ 85 阅读

相关 js 随机点名器

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

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

相关轻松看懂js点名器

css代码 <style type="text/css"> .showName { width: 400px; height

逃离我推掉我的手/ 2022年12月22日 15:26/ 0 赞/ 91 阅读

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

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

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

相关 JS实现点名功能

JS实现点名功能描述实现对数组操作主要是使用 JS修改/操作DOM树的能力描述利用JS实现点名功能，当在网页点下点击按

爱被打了一巴掌/ 2022年10月17日 00:56/ 0 赞/ 94 阅读

相关 Java随机点名器案例

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

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

相关轻松看懂机器学习常用算法

今天的算法解析如下： 1. 决策树 2. 随机森林算法 3. 逻辑回归 4. SVM 5. 朴素贝叶斯 6. K最近邻算法 7. K均值算法 8. Ad

小鱼儿/ 2022年05月16日 03:05/ 0 赞/ 193 阅读

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

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

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