Javascript随机点名系统

本次分享JavaScript主要知识点涉及到for循环、if选择结构判断语句、数组的定义、定时器、清除定时器等。

运行后的效果图

主要思路与方法

开始按钮与结束按钮相互切换
点击开始按钮，将按钮中的内容修改为结束
点击结束按钮，按钮变成开始按钮
切换按钮判断按钮状态，如果按钮为开始按钮，将按钮变成结束按钮；
如果按钮为结束按钮，将按钮变成开始按钮。
定义一个数组用来存储人名，点击开始按钮，随机选择人名；
点击停止按钮，页面不再发生变化。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>随机点名</title><style type="text/css">* {padding: 0;margin: 0;}#index {width: 300px;height: 200px;border: none;margin: 50px auto;text-align: center;}#info {width: 100%;height: 80%;line-height: 160px;border-radius: 30px;background-color: darkgreen;box-shadow: 0 3px 3px 0 #dcdcdc;text-align: center;color: #dcdcdc;margin-bottom: 10px;}#btn {height: 40px;width: 60px;line-height: 40px;border: none;outline: none;background-color: wheat;border-radius: 30px;text-align: center;box-shadow: 0 3px 3px 0 #dcdcdc;}</style><script type="text/javascript">window.onload = function() {var classMate = ["崔雪莉", "郭雪芙", "嘉歆", "阿芳", "雪灵", "老王", "刘疙瘩", "许大妈","韩晁", "静涵", "允儿", "查灿灿", "靓影", "杨幂", "李静", "邓超", "李伟", "蓝老师","金枝", "静恬", "允儿", "杨幂", "晶灵", "林志玲", "嘉懿", "流行", "邓超", "郭琦","允儿", "许大妈", "林妹妹", "杨幂", "佳思", "吉玉", "张焕", "张赛", "师傅", "菊月","王晶", "吉玟", "王飞", "林志玲", "曾艳", "王翠青", "JaydenLD"];var btn = document.getElementById("btn");var info = document.getElementById("info");var flag = false;var myinterval;btn.onclick = function() {flag = !flag;if (flag) {myinterval = setInterval(function() {var num = Math.floor(Math.random() * classMate.length);info.innerHTML = classMate[num]}, 50);btn.innerHTML = "暂停";} else {clearInterval(myinterval);btn.innerHTML = "开始";}}}</script></head><body><div id="index"><div id="info">？？？</div><button id="btn">开始</button></div></body>
</html>

innerText( )和innerHTML( )之间的区别

innerText、innerHTML 向指定元素添加内容
innerHTML ：设置元素内容，包括标签和文本一般用于修改元素对象，获取文本内容和标签
innerText：设置元素文本，只能设置文本一般用于获取元素对象，只能获取到文本内容，

Javascript随机点名系统相关推荐

javascript 随机点名
javascript随机点名视频 https://www.bilibili.com/video/BV1PJ41177YW?p=4 代码 <!DOCTYPE html> <html ...
自动点名系统c语言,用C语言编写一个随机点名系统
/*编写一个随机点名系统,运行该系统后,按空格键可以显示出一名同学,以前被选中的同学,将不会再次被选中*/ #include /*standard input & output*/ #incl ...
用JS实现一个随机点名系统（五）
用JS实现一个随机点名系统每次上课前10分钟,老师都会叫我们回答问题,奈何每次都是点学号,好像每次我都能中奖,我直接跟老师提议,老师,我用来JS来帮你写个随机点名的系统吧!这样就不会每次都抽到我了 ...
以txt为数据源的随机点名系统
入门小白一枚,看了很多相关的内容才写出了这个系统,但还有一点的缺陷. 开始的解题思路是:直接通过IO流直接对文本进行操作,但是增删改的实现实在是太麻烦了,于是就推翻重来用了数组的读出写入的方式,进行相 ...
【微信小程序】随机点名系统（点击开始滚动名字点击结束按钮结束滚动）
[微信小程序]随机点名系统(点击开始滚动名字点击结束按钮结束滚动) 1.效果图: 2.js代码 {Page({data:{condition: Math.floor(Math.random()*7+1 ...
我写了个随机点名系统，非常好用~ 我给它取名叫做——随机点名系统
快开学了吧?作为课代表或者班长的你肯定需要一个随机点名系统.所以我做了一个可以通过导入Excel录入学生信息的随机点名系统.真的方便好用!!! 一.如何使用点名系统的使用和把大象放进冰箱的步骤类 ...
python带你制作随机点名系统，超级简单
前言嗨喽~大家好呀,这里是魔王呐 ❤ ~! 在某些难以抉择得时候,我们经常要用外力来帮助我们做出选择比如,课堂随机点名或面对活动需要人上台表演时等等场景这个时候,有一个随机点名系统就非常好啦,毕 ...
随机点名系统——html初学实战
一.实验目的编写随机点名程序(越不来上课的人,被点中的概率越高,实现抽查.预警等功能) 二.算法设计与结果预览选择开发语言: C/C++ 不太适合,由于我的想法是最终要做出一个比较拿的出手的图形界 ...
一个网页版的随机点名系统
一个随机点名的网页 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

Javascript随机点名系统

Javascript随机点名系统相关推荐

最新文章

热门文章