此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名生成</title>

    <style>
        /* 页面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;
        }
    </style>

</head>

<body>
    <div class="wrapper">
     <h1 align="center">随机点名系统</h2>
      //实时显示系统时间标签
        <h6 id="data" align="right"></h6>
        <ul class="box"></ul>
        <button class="start">开始</button>
        <button class="stop">停止</button>
    </div>
</body>

<script>
    //定义全局变量方便引用
    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 += "<li >" + nameArr[i] + "</li>"
    }
    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;
    }
</script>

附一张效果图

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

html实现随机点名器的示例代码的更多相关文章

  1. 使用 React 和 Threejs 创建一个VR全景项目

    最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npx create-react-app parano // 创建一个 React 项目npm install -S ty......

  2. HTML5与CSS3知识点总结

    HTML常用标签总结 手摸手带你学CSS 好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star?????????? 原文链接:https://blog.csdn.net/weixin_43461520/articl......

  3. input标签checkbox选中触发事件的方法

    1.方法一function checkboxOnclick(checkbox){ if ( checkbox.checked == true){ //Action for checked }else{ //Action for not checked }} 2.方法二$('#allSelect'......

  4. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具,不引用其他库只使用原生js实现。初始图片如下:一、图片分割将初始图片分割为六张大小相同的棋子图片1、html舞台:1 DOCTYPE html> 2 <html lan......

  5. HTML5中的Web Notification桌面通知

    一、传统的通知实现通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一时间知道对方有了新的反馈,这个时候,就需要页面给予即使的通知。在以前,我们的通知实现主要是通过闪烁页面的标题内容来实现,实现原理其实很简单,就是定时器不断修改document.titl......

  6. 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具,使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看......

  7. React html中使用react的两种方式

    基本使用<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content=......

  8. select下拉框option的样式修改

    select原样式:进行样式修改后的样式: 附上修改代码://select外面必须包裹一个div,用来覆盖select原有的样式 <div class="option"><select name=""><option valu......

  9. html实现随机点名器的示例代码

    此点名器开始点名后需点击停止按钮完成点名,因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存,适合小范围点名使用,有大量需求可自己适当改进。<head><meta charset="UTF-8"><meta name="viewpo......

  10. html5以及jQuery实现本地图片上传前的预览代码实例讲解

    html5以及jQuery实现本地图片上传前的预览,效果类似如下: 选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)<!DOCTYPE html> <html> <head> <title......

随机推荐

  1. JavaScript 中的六种循环方法

    Javascript中的遍历循环1.for循环对于数值索引的数组来说,可以使用标准的for循环来遍历值const arr=[1,2,3,4];for(let i=0;i2.for...in循环for...in循环可以用来遍历对象的可枚举属性列表(包括原型链上的属性)const myObject={}......

  2. TypeScript中 typeof ArrayInstance[number] 剖析

    假设这样一个场景,目前业务上仅对接了三方支付 'Alipay', 'Wxpay', 'PayPal', 实际业务 getPaymentMode 会根据不同支付方式进行不同的付款/结算流程。const PAYMENT_MODE = ['Alipay', 'Wxpay', 'PayPal'];func......

  3. Java编程技术之浅析SPI服务发现机制

    SPI服务发现机制SPI是Java JDK内部提供的一种服务发现机制。SPI->Service Provider Interface,服务提供接口,是Java JDK内置的一种服务发现机制通过在ClassPath路径下的META-INF/services文件夹查找文件,自动加载文件里所定义的类......

  4. Java 在Word中添加多行图片水印

    Word中设置水印效果时,不论是文本水印或者是图片水印都只能添加单个文字或者图片到Word页面,效果比较单一,本文通过Java代码示例介绍如何在页面中添加多行图片水印效果,即水印效果以多个图片平铺到页面。(添加多行文字水印效果,可以查看这篇文章中的方法)思路及方法:获取Word页眉,添加图片到页眉段......

  5. 如何不使用 overflow: hidden 实现 overflow: hidden

    一个很有意思的题目。如何不使用 overflow: hidden 实现 overflow: hidden?CSS 中 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。而 overflow: hidden 则会将超出容器范围内的内容剪裁。控制 overflow: hi......

  6. Asp.netCore 3.1控制器属性注入and异步事务Aop by AutoFac

    Aspect Oriented Programming(AOP)是较为热门的一个话题。AOP,国内我们都习惯称之为:面向切面编程下面直接code 干货展示:1:导入相关的包:AutoFac 默认最新稳定版即可Autofac.Extensions.DependencyInjection Version......

  7. 请谨慎使用 avaliable 方法来申请缓冲区

    问题今天开始尝试用 Java 写 http 服务器,开局就遇到 Bug。我先写了一个多线程的、BIO 的 http 服务器,其中接收请求的部分,会将请求的第一行打印出来。下面是浏览器发出的请求和控制台的输出情况。我们竟然收到了一个空的请求!!这是为什么呢?我解析请求的部分代码如下。// reques......

  8. Java中的CPU占用高和内存占用高的问题排查

    下面通过模拟实例分析排查Java应用程序CPU和内存占用过高的过程。如果是Java面试,这2个问题在面试过程中出现的概率很高,所以我打算在这里好好总结一下。1、Java CPU过高的问题排查举个例子,如下:package com.classloading;public class Test {sta......

  9. ORACLE 利用 REPLACE函数替换字段字符串

    REPLACE(string,s1,s2) string 希望被替换的字符或变量 s1 被替换的字符串 s2 要替换的字符串 SQL> select replace(he love you,he,i) from dual; REPLACE(H ---------- i love you...

  10. Java HashMap源码分析(含散列表、红黑树、扰动函数等重点问题分析)

    Java HashMap源码分析(含散列表、红黑树、扰动函数等重点问题分析)写在最前面这个项目是从20年末就立好的 flag,经过几年的学习,回过头再去看很多知识点又有新的理解。所以趁着找实习的准备,结合以前的学习储备,创建一个主要针对应届生和初学者的 Java 开源知识项目,专注 Java 后端面......