JavaScript——随机点名练习

随机点名

要求：

当点击开始按钮时，名单会随机变换跳动显示，开始按钮变成了停止按钮；

当点击停止按钮时，名字的随机变换跳动停止，显示出的名字即为随机点击出来的姓名，达到随机点名效果。

思路：

1、使用 HTML+CSS 布局出随机点名系统的页面。

2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。

3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。

4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信息，最后完成输出。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* 设置点名器位置居中 */.box {width: 200px;margin: auto;margin-top: 20px;}/* 设置点名区域 */.box div {background: pink;color: #fff;width: 100%;height: 80px;text-align: center;line-height: 80px;font-size: 18px;}/* 设置按钮区域 */.box button {width: 100%;height: 35px;text-align: center;margin-top: 10px;border: 0px;background: grey;color: #fff;}</style>
</head>
<body><div class="box"><div id="realname">准备点名</div><button onclick="call()" id="btn">开始</button></div><script>var realnames = ["张三", "李四", "王五", "赵六", "陆七"];var realname = document.getElementById("realname");var flag = false;var btn = document.getElementById("btn");function call() {// flag标记true和false实现按钮的“开始”和“暂停”flag = !flag;if (flag) {//设置定时器setinterval()，实现自动点击的效果window.myInter = setInterval(function () {// Math.random()获取到一个随机数、Math.floor()向下取整var num = Math.floor(Math.random() * realnames.length);realname.innerHTML = realnames[num];}, 100);// 修改按钮为停止btn.innerText = "停止";}else {// 清除定时器clearInterval(window.myInter);// 修改按钮为开始btn.innerText = "开始";}}</script>
</body></html>

效果：

JavaScript——随机点名练习相关推荐

javascript 随机点名
javascript随机点名视频 https://www.bilibili.com/video/BV1PJ41177YW?p=4 代码 <!DOCTYPE html> <html ...
Javascript随机点名系统
本次分享JavaScript主要知识点涉及到for循环.if选择结构判断语句.数组的定义.定时器.清除定时器等. 运行后的效果图主要思路与方法开始按钮与结束按钮相互切换点击开始按钮,将按钮中的内 ...
原生JavaScript随机点名表
效果: 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8"><titl ...
用php实现随机点名,使用javascript做的一个随机点名程序
这篇文章主要介绍了使用javascript做的一个随机点名程序,经测试,效果相当不错,需要的朋友可以参考下 /p> "http://www.w3.org/TR/html4/loose. ...
原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
JavaScript 课堂练习随机点名，被点过的名字不再出现
JavaScript 课堂练习随机点名,被点过的名字不再出现 <!DOCTYPE html> <html lang="en"> <head>& ...
JavaScript实现效果——随机点名
1.效果如下: 2.代码如下: (1)CSS body{background-color: hotpink; } .all{width: 1000px;height: 600px;margin: 0 ...
SASS+Compass基本使用，结合JavaScript实现随机点名小系统
SASS+Compass基本使用,以一个随机点名demo为例 demo 源码:https://github.com/XieTongXue/call-over,效果请看(5),代码解释请看源码. (1) ...
html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下效果: 录制的gif效果图没那么理想,其实速度是比这个快的思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...

JavaScript——随机点名练习

要求：

思路：

代码：

效果：

JavaScript——随机点名练习相关推荐

最新文章

热门文章