因为工作内容的需要自己琢磨了一个随机数的点名器,很早就写出了一版,今天无意间又看到了之前写的代码,还是有很多bug的,今天做了完善在这里分享给大家

<script type="text/javascript">
// 声明变量
var time, // 计时器
div,
index,
state=true,
name; // 选中的用户名
div = document.getElementById('name');
// 创建一个数组用来存储数据
var name_list1 =
["孙萌",
"樊鑫",
"张新艳",
"王文丽",
"何玉丹",
"袁珂珂",
"王玉婷",
"杨彩芳",
"贾晓蕾",
"孟倩",
"梁伟廷",
"刘慧玲",
"张文轶",
"吴迎春",
"姚一凡",
"刘志朋",
"刘明慧",
"马晓娟",
"牛菲菲",
"赵慧娴",
"郭威",
"王雨莎",
"郭莹莹",
"孙美绮",
"邓捷",
"任文静",
"秦鑫",
"胡玲",
"马素素",
"白晓雪",
"付妍",
"马霜",
"雍芳",
"韩亚迪",
"王志新",
"吴昊",
"孙波",
"刘京君",
"刘浩波",
"冷棚亮",
"宋依波",
"李光杰",
"梁鸿健",
"王广振",
"杨维源",
"王志威"];
var name_list=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
function start(){
// 生成一个随机数
if(name_list.length>0){
index= Math.floor(Math.random() * name_list.length);
// 根据随机索引值来确定选中的姓名
name = name_list[index];
// 更改网页里div的值
div.innerHTML = name;
// Window setTimeout() 方法
time = setTimeout("start()",50);
}else{
div.innerHTML = "没人了";
}
}
function end() {
clearTimeout(time);
name_list.splice(index, 1);
console.log(name_list);
if (name_list.length == 0) {
alert("没有了。");
return;
}
} </script>

HTML层


<div id="name">
        开始点名
</div>

<div class="b2">
<button onclick="start()">开始</button>
<button onclick="end()">结束</button>
</div>

css层可自行调节

*{
margin:0;
padding:0;
} body { background-image: linear-gradient(60deg, #f46464 0%, #9c9ee5 100%);
} #name {
width: 300px;
height: 300px;
background:#fff;
border:1px solid green;
border-radius:10px;
margin:50px auto;
font-size: 50px;
text-align:center;
line-height:300px;
} .b2 {
width: 122px;
margin: auto;
} button {
height:50px;
width:50px; }

原生JS点名器,随机数的更多相关文章

  1. 原生JS元素怎么取消事件

    关于原生JS元素怎么取消事件,有3种方式 常规方法:removeEventListener 案例: <body> <div id="myDIV"> div ...

  2. 原生js添加博客点击鼠标出小心心效果~~

    昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页 ...

  3. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  4. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  5. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  6. Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js

    1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...

  7. 用原生 JS 实现双向绑定及应用实例

    写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...

  8. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  9. 用原生JS实现AJAX和JSONP

    前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...

  10. 原生js的常用方法总结

    =============== 通知: 博主已迁至<掘金>码字,博客园可能以后不再更新,掘金地址:https://juejin.im/post/5a1a6a6551882534af25a8 ...

随机推荐

  1. Angular Material 18+ 高级教程 – Material Form Field

    介绍 Form Field 或 Text Field 是 Material Design 独有的设计风格 .它长这样 注:Material Design 管它叫 Text Field,Angular ...

  2. ASP.NET Core – MVC

    前言 在 ASP.NET Core – MVC vs Razor Page 里有提到 MVC. 它算是 WebAPI 的抽象. 但是通常 MVC 指的是比较传统的 Website, WebAPI 则是 ...

  3. Identity – Permission Claims & UserClaimsPrincipalFactory

    前言 在 Identity – Authorize 有介绍过, Identity 的验证核心是 Claims. 在 Identity – Without Identity Framework 也看到了 ...

  4. IIS Reverse Proxy 反向代理

    前言 反向代理是这样的: 2 台 web server, A server, B server A server 是 public 的, 有 domain, 有 SSL (作为 B server 的代 ...

  5. SimpleAIAgent:使用免费的glm-4-flash即可开始构建简单的AI Agent应用

    SimpleAIAgent是基于C# Semantic Kernel 与 WPF构建的一款AI Agent探索应用.主要用于使用国产大语言模型或开源大语言模型构建AI Agent应用的探索学习,希望能 ...

  6. SuperMap iManager云套件数据动态更新刷新地图与数据服务

    一.使用背景 有这么一个需求,后端也就通过SuperMap iDesktop或数据库更新了新增或更新某个数据地理信息后,云套件SuperMap iManager中的服务没有更新,无法实时查看到更新的数 ...

  7. KPTI——可以缓解“熔断” (Meltdown) 漏洞的内核新特性

    Linux 内核修复办法:内核页表隔离KPTl(kernel page table isolation) 每个进程一张页表变成两张:运行在内核态和运行在用户态时分别使用各自分离的页表 Kernel页表 ...

  8. javascript 中 0.1 + 0.2 === 0.3 是否正确 ?

    不正确 ,因为 js 是 动态 .弱类型 ,即时编译的语言 :js中的小数都是浮点型 ,比如 0.1 实际上可能是 0.11111111... 0.2 可能是 0.2 22222..... 所以 0. ...

  9. 没想到,Python 还可以制作 Web 可视化页面!

    一谈到Web页面,可能大家首先想到就是HTML,CSS或JavaScript. 本次小F就给大家介绍一下如何用Python制作一个数据可视化网页,使用到的是Streamlit库. 轻松的将一个Exce ...

  10. 容器部署DNS你会吗?

    docker快速部署DNS,实现快速上线 概念 环境介绍 部署DNS 下载相关镜像 创建并启动DNS容器 简单介绍三种创建方式 容器启动停止 创建dns交互式容器 配置DNS容器相关配置 测试 修改客 ...