html中自动随机点名的程序,html实现随机点名器的示例代码
此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进。
随机点名生成
/* 页面css样式 */
.wrapper {
width: 800px;
margin: 100px auto;
border: 1px solid #ddd;
text-align: center;
}
.box li {
vertical-align: top;
display: inline-block;
width: 100px;
height: 50px;
border: 2px solid #ddd;
border-radius: 15px;
text-align: center;
line-height: 50px;
margin: 5px;
}
.wrapper button {
border: none;
width: 100px;
height: 50px;
border-radius: 10px;
cursor: pointer;
outline: none;
margin-top: 20px;
font-weight: bolder;
color: #333;
background-color: rgb(14, 146, 43);
}
.wrapper button {
display: inline-block;
}
body {
background-color: #eee;
}
随机点名系统
//实时显示系统时间标签
开始
停止
//定义全局变量方便引用
var boxUl = document.getElementsByClassName('box')[0];
var start = document.getElementsByClassName('start')[0];
var stop = document.getElementsByClassName('stop')[0]
var oLi = document.getElementsByTagName('li');
//数据准备
var nameString = new String("张三,李四,王五,赵六,周七,田八,国九,归零,张3,李4,王5,赵6,周7,田8,国9,归0");
var nameArr = nameString.split(",");
//获取每个学生姓名添加到标签中,自动解析html标签
var str = "";
for (let i = 0; i < nameArr.length; i++) {
str += "
" + nameArr[i] + ""
}
boxUl.innerHTML = str;
//添加开始按钮的点击事件
var timer = null;
start.onclick = function () {
// 设置定时器
timer = setInterval(function () {
// 根据数组长度范围生成随机数
var i = Math.floor(Math.random() * nameArr.length);
// 先通过for循环清空所有style属性
for (var j = 0; j < oLi.length; j++) {
oLi[j].removeAttribute("style");
}
// 为随机选择的li颜色属性
oLi[i].style.background = "red";
}, 150);
};
// 点击停止
stop.onclick = function () {
// 清空定时器停止点名
clearInterval(timer);
}
//页面初始化时间设置
window.onload = function () {
datatime();
}
//页面时间动态刷新
setInterval(datatime, 1000);
function datatime() {
let data = new Date();
let dataString ="现在是北京时间:" + data.toLocaleString();
document.getElementById("data").innerHTML = dataString;
}
附一张效果图
到此这篇关于html实现随机点名器的示例代码的文章就介绍到这了,更多相关html随机点名器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
html中自动随机点名的程序,html实现随机点名器的示例代码相关推荐
- html中自动随机点名的程序,JavaScript实现随机点名程序
本文实例为大家分享了js实现随机点名程序的具体代码,供大家参考,具体内容如下 效果: 录制的gif效果图没那么理想,其实速度是比这个快的 思路: 1.定义一个数组,存放名单 2.启动定时器,设定间隔时 ...
- Python wxpython篇 | Python生态库之图形用户界面开发库 “wxPython “ 的安装及使用(附. 使用pyinstaller 库打包Python随机点名小程序程序.exe文件)
全文目录 wxPython 图形用户界面 PyCharm 中安装 wxPython库 PyCharm中将程序打包成 .exe 可执行文件 wxPython 的使用 第一个wxPython 程序 自定义 ...
- 随机点名小程序 tkinter
随机点名小程序 源码见github: https://github.com/linli1724647576/Random_roll_call 问题描述 随机点名程序(越不来上课的人,被点中的概率越高, ...
- Tkinter模块GUI界面化编程实战(四)——随机点名小程序(含详解及完整源码、完整程序下载链接)
[上期回顾:Tkinter模块GUI界面化编程实战(三)--2048小游戏] 这篇博客介绍了如何用Python Tkinter模块编写一个界面化的随机点名小程序,在博客下面有完整的源码,源码中有超详 ...
- Excel制作随机点名小程序
在Excel工作表中,通过空间命令按钮和VBA代码,可以省略很多简单重复的工作,例如点名.只要名单上有名字,就不需要人工拿着花名册挨个点名,在这里Excel就可以充当你的智能小助手. 一.按Alt+F ...
- 怎么用python制作随机点名软件_python写一个随机点名软件的实例
最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix ...
- 学生随机点名PHP,JS实现课堂随机点名和顺序点名
1. 效果: 2. Html代码: 随机点名区域 3. JavaScript代码: var i = 0; //t用来接收setTimeOut()的返回值 var t; var st = ['张三',' ...
- 【小程序开发必备】微信小程序常用API全介绍,附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
- java窗体实现随机点名软件,求一个教师随机点名程序
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 写完了,把需要点名的人的名字放进数组直接运行,单击回车键结束 import java.awt.*; import java.awt.event.KeyEv ...
最新文章
- FPGA之道(8)时钟处理单元
- 【生成模型】解读显式生成模型之完全可见置信网络FVBN
- 「PKUSC2018」星际穿越 (70分做法)
- xpath技术,用在dom4j中
- 长春金桥计算机学校,金桥学校2017年招生简章
- iwrite提交不了作业_“iWrite写作中心”使用全攻略
- Spring Boot使用AOP在控制台打印请求、响应信息
- python 判断文件夹是否存在 否则创建_10行Python代码自动清理电脑内重复文件,解放双手!...
- java timer指定线程池_Java 定时器(Timer)及线程池里使用定时器实例代码
- Android版本下载以及切换
- ibm z系列服务器图片,IBM Z系列本本最清晰图片全面曝光(图)
- 往前走吧,管它未来是什么!!
- java clh队列什么意思_浅谈Java并发 J.U.C之AQS:CLH同步队列
- [YNOI2017]由乃的商场之旅 莫队
- Excel公式与函数——每天学一个
- 小米air2se耳机只有一边有声音怎么办_169元,性价比超高,小米蓝牙耳机Air2 SE,C位出道...
- M35J型多普勒流量计使用说明书
- springboot+mybatis-plus在log控制台输出sql语句
- 以太坊-Ethereum Studio工具入门-快速开始
- 经典DP:测试鸡蛋承受力
热门文章
- php万圣节源码,【万圣创意】巴迪一家的万圣节
- pdf文档编辑(pdf编辑器)、pdf文档转换为word文档(pdf转换为word转换器)——Adobe Acrobat DC软件的下载与安装
- 使用scrapy爬取苏宁易购图书信息
- spring是java ee框架吗_JavaEE微框架Spring Boot深入解读
- 网络教育风生水起,9158如何脱颖而出?
- 二元固定信道(BSC)信道的MATLAB实现
- python爬虫验证码的处理(云打码)_用Python识别验证码
- C++基础13:容器适配器(Container Adapte)
- 5/21 周六_习惯累积沉淀_新浪博客
- 开心复习-css3之路