利用原生js实现随机点名

类型一：

效果：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}.wrapper {width: 800px;margin: 10px auto;border: 2px solid blue;text-align: center;}.lucking {width: 200px;height: 100px;line-height: 100px;border: 1px solid blue;}.wrapper ul li {width: 100px;height: 50px;line-height: 50px;text-align: center;margin: 4px;border: 2px solid blue;border-radius: 5px;display: inline-block;}.wrapper button {margin-top: 20px;width: 120px;height: 50px;border: none;background-color: #ddd;border-radius: 5px;font-weight: 700;outline: none;cursor: pointer;color: #fff;font-size: 18px;}.wrapper .active {background-color: orange;font-weight: bold;color: #fff;}.wrapper .start {background: green;}.wrapper .stop {background: red;}</style>
</head><body><div class="wrapper" id="_wrapper"><ul id="_ul"></ul><button class="start">开始点名</button><button class="stop">停止</button><div class="lucking" id="_lucking"><p></p></div></div><script>var array = ['张学友', '郭富城', '郑源', '卓依婷', '李易峰', '杨紫', '黄晓明', '易烊千玺', '杨洋', '陈钰琪', '杨幂', '李一桐', '李宇春', '周笔畅', '张靓颖', '谢霆锋', '张毅', '周传雄', '黄源', '刘德华', '庾澄庆'];// 获取元素var _wrapper = document.getElementById('_wrapper');var ul = document.getElementById('_ul');;var timer = null;init();function init() {// 动态创建lifor (var i = 0; i < array.length; i++) {var oli = document.createElement('li');oli.innerHTML = array[i];ul.appendChild(oli);}// 点击click();}function click() {// 获取start按钮var start = _wrapper.getElementsByTagName('button')[0];var stop = _wrapper.getElementsByTagName('button')[1];var lucking = document.getElementById('_lucking');// 定时器start.addEventListener('click', function() {clearInterval(timer);timer = setInterval(function() {// 获得随机数var random = Math.floor(Math.random() * array.length);for (var i = 0; i < array.length; i++) {ul.children[i].className = '';}ul.children[random].className = 'active';}, 50);});stop.addEventListener('click', function() {clearInterval(timer);// 找到此时的元素var active = document.getElementsByClassName('active')[0];lucking.children[0].innerText = "幸运儿：" + active.innerText;})}</script>
</body></html>

类型二：

效果：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.center{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-70%);}button{width:80px;height: 40px;border-radius: 10px;border:none;outline: none;color: #fff;}</style>
</head><body><center class="center"><div id="d" style="background: #aaa;width: 250px;height: 120px;border-radius: 10px;text-align: center;line-height: 120px;"><!-- 设置背景框颜色和长度 --><h1 id='name'></h1> <!-- 用于显示随机的人名 --></div><div><button id='start' type="button" style="margin:10px 0;background: red;">开始</button></div><div><button id='temp' type="button" style="background: green;">暂停</button></div></center><script type="text/javascript">window.onload = function() {var names = ['张三', '李四', '王五', '赵六', '周杰伦', '刘德华', '张学友', '郭富城']; //人名数组var clors = ['red', 'orange', 'blue', 'yellow', 'green', '#ccc', '#fff', 'violet']; //颜色数组var name = document.getElementById('name'); //获取id为name的元素var d = document.getElementById('d');var temp = document.getElementById('temp');var startR = -1; //记录计时器的序号var start = document.getElementById('start');function Random() { //产生随机数，并更改h1中的内容与颜色var nNum = Math.floor(Math.random() * 8); //这里的8为你当前人名的数量var cNum = Math.floor(Math.random() * 8);name.innerHTML = names[nNum];d.style.color = clors[cNum];}start.onclick = function() { //单击开始方法if (startR == -1) //不加限制，多次点击开始会有多个计时器启动startR = setInterval(Random, 100);}temp.onclick = function() { //单击暂停方法clearInterval(startR);startR = -1;}}</script>
</body></html>

利用原生js实现随机点名相关推荐

使用原生Js实现随机点名
使用原生Js实现随机点名最近学了一点前端内容,老师让用js设计一个班里的随机点名器.就尝试写了一个,具体实现效果如图: 实现代码: <!DOCTYPE html> <html la ...
原生JS实现随机点名项目
核心思想随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 Math.random() * num: 产生从0到num的随机数 Math.floor(): 向下取整 ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
原生JavaScript实现随机点名
原生JavaScript实现随机点名一,HTML代码 <div id="center"><div id="showname">O_O ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
matlab运用函数随机点名,js实现随机点名功能
本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了代码如下: 随机点名 .box{ width: 800 ...
【JS】随机点名小案例
一.html <h2>随机点名</h2><div class="box"><span>名字是:</span><di ...
利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
原生JS开箱随机抽奖代码
下载地址原生JS制作开箱随机抽奖小游戏,思路比较简单,十分实用!您可以随意定制抽奖奖品,点击开启按钮,箱子筛选随机产生中奖结果弹窗提示.ps:演示内容无任何含义. dd:

利用原生js实现随机点名

利用原生js实现随机点名相关推荐

最新文章

热门文章