jQuery随机上色

 成品展示(纯娱乐)

(目前最高纪录4*4)

html

<div>
	<input type="text" placeholder="请输入行数" class="num1">
	<input type="text" placeholder="请输入列数" class="num2">
	<button onclick="showBox()">生成</button>
	<button onclick="coloring()">上色</button>
	<span class="result"></span>
</div>
<div class="pageBody"></div>

css

* {
	margin: 0;
}

.box {
	width: 15px;
	height: 15px;
	border: 1px solid #000;
	margin: 5px;
	float: left;
}

.libox {
	clear: both;
}

.boxColor {
	background-color: #ff0000;
}

js

var num1,
num2,
count = 0,
result = 0,
time;

function showBox() {
	if (time != null) clearTimeout(time);
	count = 0;
	result = 0;
	num1 = $(".num1").val(),
		num2 = $(".num2").val();
	$('.pageBody').empty()
	$('.result').text("");
	var setBox = ""
	for (var i = 1; i <= num1; i++) {
		setBox += '<div class="box' + i + '_1 box libox"></div>'
		for (var j = 1; j <= num2 - 1; j++) {
			setBox += '<div class="box' + i + '_' + (j + 1) + ' box"></div>'
		}
	}
	$(".pageBody").append(setBox);
}

function coloring() {
	var randnum1 = parseInt(Math.random() * (num1 - 1 + 1) + 1);
	var randnum2 = parseInt(Math.random() * (num2 - 1 + 1) + 1);
	console.log(randnum1 + ":" + randnum2 + ":" + count)
	if (count == (num1 * num2)) {
		$('.result').text('一共使用了' + result + '次')
		return;
	}
	if ($('.box' + randnum1 + '_' + randnum2).hasClass('boxColor')) {
		$('.box' + randnum1 + '_' + randnum2).removeClass('boxColor')
		count--;
	} else {
		$('.box' + randnum1 + '_' + randnum2).addClass('boxColor')
		count++;
	}
	result++;
	time = setTimeout(coloring, 1000)
}

 代码获取