因为工作内容的需要自己琢磨了一个随机数的点名器,很早就写出了一版,今天无意间又看到了之前写的代码,还是有很多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. html4,5 basic

    更新: 2021-06-15 游览器 href 和 base href 绝对路径和相对路径 在没有 base href 的情况下 href="/about.html" 就是从 do ...

  2. Azure 入门系列 (外传 小知识)

    数据中心地理结构 Azure 数据中心有很多,这我们知道, 但是我们还需要知道它的结构, 不然在做 Backup, Recovery Disaster 的时候会卡卡. 参考: Region, Avai ...

  3. C++ STL queue容器——队列

    queue容器 基本概念 queue是一种**先进先出的数据结构,它有两个出口,queue容器允许从一端新增元素,从另一端移除元素. queue容器没有迭代器,所有元素进出都必须符合"先进先 ...

  4. Vue3——Vue Router

    安装 vue-router 依赖包 npm install vue-router@4 创建 router 文件夹,然后在里面创建一个 index.ts 文件,用于定义你的路由配置 // index.t ...

  5. 基于AIOps实现智慧园区极简IT运维

    随着物联网.云平台.大数据.人工智能等技术的发展,并逐步投入到智慧园区的建设,传统园区数字化转型加快.园区的形式包括产业园区.教育园区.制造业园区.科研园区.社区等等,园区形态不断演进和发展,园区网承 ...

  6. (系列五).net8 中使用Dapper搭建底层仓储连接数据库(附源码)

    说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发). 该系统文章,我会尽量说的非常详细,做到不管新手.老手都能看懂. 说明:OverallAuth2 ...

  7. AMBA总线架构简介

    于是乎,我们想到了总线,用一个统一的接口协议,设计出一个符合要求的总线,然后将ARM核和各种外设模块挂载在总线上,这样,命令和数据似乎便可以在CPU和外设之间自由穿梭. 1 AMBA总线 AMBA,英 ...

  8. dotnet 的LINQ使用

    // LINQ (Language Integrated Qyery) 语言集成查询 -- 用来查询的一些操作类库 // 1. LINQ to Objects 主要负责对象的查询 // 2. LINQ ...

  9. input 的hidden 属性

    hidden 会隐藏input 标签内容显示,不占位置 : <input type="file" name="" id="" ref= ...

  10. 40. diff 的新旧节点数组如何比较

    根据唯一标识符key值,把新旧的节点比较,不同就更新到新节点,相同就复用就节点,然后生成新的 Vnode :