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


Posted in Javascript onApril 02, 2021

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

<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随机点名器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
如何利用JavaScript实现二叉搜索树
(开源)微信小程序+mqtt,esp8266温湿度读取
Javascript中的解构赋值语法详解
Apr 02 #Javascript
Ajax实现局部刷新的方法实例
前端学习——JavaScript原生实现购物车案例
JavaScript中关于预编译、作用域链和闭包的理解
JavaScript 去重和重复次数统计
Mar 31 #Javascript
You might like
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python实现的对本地host127.0.0.1主机进行扫描端口功能示例
2019/02/15 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python猜数字算法题详解
2020/03/01 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
Python连接mysql方法及常用参数
2020/09/01 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
表彰会主持词
2014/03/26 职场文书
公司节能减排方案
2014/05/16 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
平安家庭事迹材料
2014/12/20 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL