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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
vue实现下载文件流完整前后端代码
Nov 17 Vue.js
前端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 模板高级篇总结
2006/12/21 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
javascript 函数调用规则
2009/08/26 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
2016/05/10 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python中bisect模块用法实例
2014/09/25 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python入门_条件控制(详解)
2017/05/16 Python
获取Django项目的全部url方法详解
2017/10/26 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
施工资料员岗位职责
2014/01/06 职场文书
责任担保书范文
2014/05/21 职场文书
协议书范文
2015/01/27 职场文书
公证处委托书
2015/01/28 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android