快捷導(dǎo)航

js實現(xiàn)簡單的點名器隨機(jī)色實例代碼

更新時間：2020年09月20日 09:33:43 作者：qq_45666837

這篇文章主要給大家介紹了關(guān)于js實現(xiàn)簡單的點名器隨機(jī)色的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

js簡單實現(xiàn)點名器隨機(jī)色

布局(排版)

<body>
	<button onclick="star()">開始</button>
	<button onclick="stop()">結(jié)束</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>
 //聲明一個數(shù)組存取用戶名
 const arr=['貂蟬','西施','楊玉環(huán)','王昭君','李白','趙匡胤','朱元璋','小喬','劉徹'];
 const box=document.getElementById('box');
 //聲明一個全局變量
 let set;
 // console.log(box)
 // 動態(tài)創(chuàng)建div,把數(shù)組的數(shù)據(jù)放到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);
 // 點擊開始按鈕隨機(jī)選一個名字
 }
 function star(){
 // 開始之前先清除一遍定時器,防止出bug停止不了
  clearInterval(set);
  //設(shè)置一個定時器
  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);
 }
 //封裝一個隨機(jī)色
 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>

總結(jié)

到此這篇關(guān)于js實現(xiàn)簡單的點名器隨機(jī)色的文章就介紹到這了,更多相關(guān)js點名器隨機(jī)色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)通過js操作wxml的wxss屬性,結(jié)合實例形式分析了微信小程序使用js操作wxml的wxss屬性相關(guān)原理、實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2018-12-12
原生js實現(xiàn)返回頂部緩沖效果
本文主要分享了原生js實現(xiàn)返回頂部緩沖效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
用Javascript實現(xiàn)UTF8編碼轉(zhuǎn)換成gb2312編碼
這篇文章主要介紹了用Javascript實現(xiàn)UTF8編碼轉(zhuǎn)換成gb2312編碼
2006-12-12
深入淺析JavaScript的API設(shè)計原則
這篇文章主要介紹了JavaScript的API設(shè)計原則，包括接口的流暢性，一致性，參數(shù)的處理，可擴(kuò)展性，對錯誤的處理，可預(yù)見性，注釋和文檔的可讀性，本文介紹的非常詳細(xì)，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
這篇文章主要介紹了js繼承方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04

使用JavaScript實現(xiàn)鏈表的數(shù)據(jù)結(jié)構(gòu)的代碼

鏈表（Linked list）是一種常見的基礎(chǔ)數(shù)據(jù)結(jié)構(gòu)，是一種線性表，但是并不會按線性的順序存儲數(shù)據(jù)，而是在每一個節(jié)點里存到下一個節(jié)點的指針(Pointer) 。下面我們用 JavaScript 代碼對鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行實現(xiàn)

2017-08-08