交错阶梯色彩测试

【实例截图】

【核心代码】

function doSave(value, type, name) {
    var blob;
    if (typeof window.Blob == "function") {
        blob = new Blob([value], {type: type});
    } else {
        var BlobBuilder = window.BlobBuilder || window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(value);
        blob = bb.getBlob(type);
    }
    var URL = window.URL || window.webkitURL;
    var bloburl = URL.createObjectURL(blob);
    var anchor = document.createElement("a");
    if ('download' in anchor) {
        anchor.style.visibility = "hidden";
        anchor.href = bloburl;
        anchor.download = name;
        document.body.appendChild(anchor);
        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, true);
        anchor.dispatchEvent(evt);
        document.body.removeChild(anchor);
    } else if (navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, name);
    } else {
        location.href = bloburl;
    }
}

(function() {
	// 实验总次数
	var total = 0;
	// 主色调
	var baseColor =  "rgb(57,85,133)";
	// 变化颜色
	var newColor = document.getElementById("container"),
		a1 = 67,
		b2 = 85,
		c3 = 113;
	/*container.style.backgroundColor = "rgb(" a1 "," b2 "," c3 ")";*/
	// 变化区域序号
	var changeIndex;
	
	//增加的地方！！！！！！！！！！！！！1

	var txt="blue1"
	var txt2;
	//增加的地方停止

	var step = -3;
	// 计时器--4秒之后
	var timer
	/*setTimeout(function() {
		// 隐藏颜色区域
		$('#container').hide();
		// 准备下一轮--按识别错误处理
		nextChoose(false);
	}, 4000);*/

	// 点击事件
	$('#container>.r').click(function(event) {
		// 取消计时
		clearTimeout(timer);
		// 隐藏颜色区域
		$('#container').hide();
		// 是否选择正确
		var flag = $(this).attr('index') == changeIndex;
		// 准备下一轮
		nextChoose(flag);
	});

	// 下一轮
	function nextChoose(flag) {
		// 是否达到试验次数
		if (  total > 12) {
			return;
		}
		// 步长变化
		colorStep(flag);

		// 更改背景色
		changeColor();

		// 显示变化之后的区域颜色
		$('#container').show();

		// 重新计时--4秒之后
		timer = setTimeout(function() {
			// 隐藏颜色区域
			$('#container').hide();
			// 准备下一轮--按识别错误处理
			nextChoose(false);
		}, 2000);
	}


	// 颜色步长变化
	function colorStep(flag) {
		console.log(a1);
		console.log(b2);
		console.log(c3);
		txt2=" ";
		txt2=txt2.concat(a1);
		txt2=txt2.concat(" ");
		txt2=txt2.concat(b2);
		txt2=txt2.concat(" ");
		txt2=txt2.concat(c3);
		txt=txt.concat(txt2);
		if(total==12)
		{doSave(txt, "text/latex", "b1.txt"); }
		// 是否正常步长变化--是否正确识别
		if (flag) {
			step = step   0.2 ;
			a1 = Math.round(a1   step);
			b2 = Math.round(b2);
			c3 = Math.round(c3 - 2*step);

		} else {
			step = step   0.4;
			a1 = Math.round(a1 - step);

			b2 = Math.round(b2);

			c3 = Math.round(c3   2*step);

		}
	}

		// 设置颜色
	function changeColor() {
		// 获取随机区域序号
		changeIndex = getChangeIndex();
		// 遍历设置背景色
		$.each($('#container>.r'), function(index, obj) {
			// 直接判断序号
			if (index == changeIndex) { 
				$(obj).css('fill', "rgb(" a1 "," b2 "," c3 ")");
			} else {
				$(obj).css('fill', baseColor);
			}
		});
	}

	// 随机数
	function getChangeIndex() {
		var index = Math.floor(Math.random() * 4);

		return index;
	}

	// 开始测试
	changeColor();
	// console.log(new Date());
	// 开始计时
	timer = setTimeout(function() {
		// console.log(new Date());
		// 隐藏颜色区域
		$('#container').hide();
		// 准备下一轮--按识别错误处理
		nextChoose(false);
	}, 2000);
})()