master

分支 (1)

管理

管理

master

ThreePlusOneGame
/
bt.html

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title> 3n + 1 Game </title>
	<link rel="stylesheet" href="./bt.css">
</head>

<body>
	输入十进制数字: <input type="number" id="ipt" />
	&nbsp;<span id="cbs">显示</span>队列前的零<input id="cbz" type="checkbox" checked />
	<!-- Maybe I can make it more beautiful, but I just want keep it simple. -->
	<div id="sticker">
		<p id="cls">X</p>
		<p id="currLoc"></p>
		<p id="rowCnt"></p>
	</div>
	<table>
		<tbody id="insertRow"></tbody>
	</table>
	<script type="text/javascript" src="./bt.js"></script>
	<script>
		'use strict';

		const insertRow = document.querySelector('#insertRow');
		const sticker = document.querySelector('#sticker');
		const rowCnt = document.querySelector('#rowCnt');
		const currLoc = document.querySelector('#currLoc');

		// Show Step In Web
		function showSteps(num) {
			insertRow.textContent = '';

			let cnt = 0, width = 0;

			const callBack1 = () => {
				let tr = document.createElement("tr");

				let td2 = document.createElement("td");
				td2.innerHTML = '<tt>' + robots.map(e => ROBOT_SIGN[e]).join('')
					+ '</tt><tt>' + track.map(e => TRACK_SIGN[e]).join('') + '</tt>';

				tr.appendChild(td2);
				insertRow.appendChild(tr);
			}

		}

		// add Event Listener
		(() => {
			document.getElementById('ipt').addEventListener('change', function (evn) {
				showSteps(Math.abs(parseInt(this.value, 10)));
			}, false);
			document.getElementById('cls').addEventListener('click', function (evn) {
				sticker.style.visibility = 'hidden';
			}, false);
			document.getElementById('cbz').addEventListener('change', function (evn) {
				fillZero = this.checked;
				document.getElementById('cbs').textContent = this.checked ? '显示' : '清除';
				showSteps(Math.abs(parseInt(document.getElementById('ipt').value, 10)));
			}, false);

			insertRow.addEventListener('click', evt => {
				let target = evt.target, rowIndex = 0;
				switch (target.nodeName) {
					case 'TT':
						rowIndex = target.parentElement.parentElement.rowIndex;
						break;
					case 'TD':
						rowIndex = target.parentElement.rowIndex;
						break;
					case 'TR':
						rowIndex = target.rowIndex;
						break;
					default:
						break;
				}
				// console.log('row : %d , char : %d ',rowIndex, Math.ceil(evt.offsetX / 15));
				currLoc.textContent = `row : ${rowIndex}, col : ${Math.ceil(evt.offsetX / 15)}`;
				sticker.style.visibility = 'visible';
			});
		})();
	</script>

</body>

</html>