js实现简单的点名器随机色

js简单实现点名器随机色

布局(排版)

<body><button onclick="star()">开始</button><button onclick="stop()">结束</button><div id="box"></div>
</body>

css样式

<style>#box{width: 240px;height: 400px;}#a{width: 80px;height: 40px;line-height: 40px;text-align: center;float: left;background: cyan;}
</style>

js代码

<script>//声明一个数组存取用户名const arr=['貂蝉','西施','杨玉环','王昭君','李白','赵匡胤','朱元璋','小乔','刘彻'];const box=document.getElementById('box');//声明一个全局变量let set;// console.log(box)// 动态创建div,把数组的数据放到div中for (var i = 0; i< arr.length; i++) {var div=document.createElement('div');div.id='a';div.innerHTML=arr[i];// console.log(div.innerHTML);box.appendChild(div);// 点击开始按钮随机选一个名字}function star(){// 开始之前先清除一遍定时器,防止出bug停止不了clearInterval(set);//设置一个定时器set=setInterval(() => {for(var k=0;k<arr.length;k++){box.children[k].style.background='';}var random = parseInt(Math.random() * arr.length);box.children[random].style.background = color();}, 100)}// 点击停止选取名字(清除定时器)function stop(){clearInterval(set);}//封装一个随机色function color(){const r = Math.floor(Math.random() * 255);const g = Math.floor(Math.random() * 255);const b = Math.floor(Math.random() * 255);const rgb='rgb('+r+','+g+','+b+')';return rgb;}
</script>

js实现简单的点名器随机色相关推荐

原生JS八（Math对象，随机色）
Math对象,随机色一. Math对象 1.`max(x,y)/min(x,y)` 2.`Math.ceil/floor/round` 3.`Math.random()*(较大的数 - 较小的数) ...
element table row-style 实现列颜色区分以及 js生成随机色，避免相近色
实现仓库看板需求遇到的问题 table 显示的不同订单生产编码同时下线字体用不同颜色区分随机生成颜色,不能过于相似,避免灰颜与过暗步骤需要实现不同的订单号展示不同的颜色.之前有使用 " ...
使用Vue.js的简单拾色器
选色器 (vue-colorpicker) A Simple Color Picker With Vue.js 使用Vue.js的简单拾色器 View demo 查看演示 Download Sourc ...
js生成rgb随机色（JavaScript函数生成rgb随即色）
定义函数方法方便调用: function choseRgb() {// Math.random是生成0-1之间的随机数 *256 的范围就变成0.xx-255.7// Math.floor 向下取整 ...
JS——实现简单的随机3D骰子
描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: <!DOCTYPE html> <html lang="en"><head& ...
html制作3d筛子,JS实现简单随机3D骰子
本文实例为大家分享了JS实现简单随机3D骰子的具体代码,供大家参考,具体内容如下描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: Document PLAY css文件: @ ...
js获取随机色，也可以指定获取深色 or 浅色。
有帮到你的话,请顺手点个赞或者关注吧! function randomColor(num) {// 1 代表获取浅色的随机色 2代表获取深色的随机色不传参数num代表获取随机色if(!num){v ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
java喷泉编码_好程序员Java教程分享使用JS实现简单喷泉效果
原标题:好程序员Java教程分享使用JS实现简单喷泉效果好程序员Java教程分享使用JS实现简单喷泉效果,最近,在教学生使用JS的基本操作,为了练习JS的基本作用,特地写了一个喷泉效果,代码如下: ...

js实现简单的点名器随机色

布局(排版)

css样式

js代码

js实现简单的点名器随机色相关推荐

最新文章

热门文章