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


Posted in Javascript onSeptember 20, 2020

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

Javascript 相关文章推荐
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
原生js实现弹出层效果
Jan 20 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 #Javascript
Vue+element+cookie记住密码功能的简单实现方法
Sep 20 #Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 #Javascript
vue-cli3 热更新配置操作
Sep 18 #Javascript
vue-cli 关闭热更新操作
Sep 18 #Javascript
Node.JS如何实现JWT原理
Sep 18 #Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 #Javascript
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python实现KNN邻近算法
2021/01/28 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
计算机操作自荐信
2013/12/07 职场文书
科研课题实施方案
2014/03/18 职场文书
房屋出租协议书
2014/04/10 职场文书
法学自荐信
2014/06/20 职场文书
一年级班主任工作总结2014
2014/11/08 职场文书
冰峪沟导游词
2015/02/09 职场文书
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS