SOURCE

let main = document.getElementsByClassName("canvas")[0]
let randomDesign = document.querySelector(".randomDesign")
let colors = document.querySelector(".chooseColor")
let clearColor = document.querySelector(".clearColors")
let currentColor = document.querySelector(".currentColor")
let color = '#f00'
let str = ''
for(let i= 0;i<300;i++){
	str += '<span></span>'
}
main.innerHTML = str

// 填色
main.addEventListener("click",function(event){
	let the = event.target
	if( the.tagName.toLowerCase() === 'span' && !the.className ){
		the.className = 'checked'
		the.style.backgroundColor = color
	}else if( the.tagName.toLowerCase() === 'span' && the.className ){
		the.className = ''
		the.style.backgroundColor = ''
	}
})
//换色
colors.addEventListener("click",function(event){
	let the = event.target
	if(the && the.className.indexOf("colors") !== -1 ){
		color = the.innerText
		currentColor.innerText = color
		console.log( color )
	}
})

// 清空
clearColor.addEventListener("click",function(){
	let spans = document.querySelectorAll(".canvas span")
	Array.prototype.map.call(spans,function(item,index){
		item.className = ''
		item.style.backgroundColor = ''
	})
})

//随机显示
randomDesign.addEventListener("click",RandomDesign)

function RandomDesign(){
	let spans = document.querySelectorAll(".canvas span")
	
	Array.prototype.map.call(spans,function(item,index){
		let R = parseInt( Math.random() * 10 )

		if(R > 5){
			item.className = 'checked'
			item.style.backgroundColor = color
		}else{
			item.className = ''
			item.style.backgroundColor = ''
		}
	})	
}

<div class="main">
		<div class="chooseColor">
			<p>当前颜色：<span class="currentColor">#f00</span></p>
			<button class="colors">#666</button>
			<button class="colors">#999</button>
			<button class="colors">#f00</button>
			<button class="colors">#fff</button>
			<button class="randomDesign">随机图案</button>
			<button class="clearColors">清空</button>
		</div>
		<div class="canvas"></div>
	</div>

html,body{
	margin: 0;
	padding: 0;
}

.main{
	width: 1000px;
	margin: 10px auto;
}

.chooseColor{
	padding: 20px 0;
}

.canvas{
	display: flex;
	flex-wrap: wrap;
}
.canvas span{
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #eee;
	box-sizing: border-box;
	border: 1px solid #e8e8e8;
	transition: all 0.3s linear 0s;
}