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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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日期时间函数的高级应用技巧
2009/05/16 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
详解参数传递四种形式
2015/07/21 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
总结js函数相关知识点
2018/02/27 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
微信 用脚本查看是否被微信好友删除
2016/10/28 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
详解Python多线程下的list
2020/07/03 Python
python help函数实例用法
2020/12/06 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
毕业自我鉴定
2013/11/05 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
Python 中面向接口编程
2022/05/20 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS