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;

}

附一张效果图

6628e94dd6a2f2cdcb757738996d09d6.png

到此这篇关于html实现随机点名器的示例代码的文章就介绍到这了,更多相关html随机点名器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值