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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
vue.config.js常用配置详解
Nov 14 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 和 COM
2006/10/09 PHP
ip签名探针
2006/10/09 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
Vue中render方法的使用详解
2018/01/26 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
详解Python中的type和object
2018/08/15 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
质量标语大全
2014/06/12 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
个人批评与自我批评
2014/10/15 职场文书
vue中data里面的数据相互使用方式
2022/06/05 Vue.js