XuankangLin/name.html

## name.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Andriy Lin"/>
    <title>所有名字</title>
    <style type="text/css">
        body {
            margin: 50px;
        }
        textarea {
            width: 400px;
            height: 50px;
            font-size: 12pt;
        }
        .tinybox {
            height: 20px;
        }
        .juxta {
            display: inline-block;
            margin-left: 20px;
            margin-right: 20px;
        }
        button {
            margin-top: 20px;
            margin-left: 10px;
            margin-right: 10px;
            font-size:15px;
        }
    </style>
</head>

<body class="all">
    <h3>喜欢的字（空格分隔）</h3>
    <div class="juxta">
        <p>第1声，阴平：</p>
        <textarea id="src_1">英 卓 琛 萱 之 依 初 昕 诗 歆</textarea>
    </div>
    <div class="juxta">
        <p>第2声，阳平：</p>
        <textarea id="src_2">然 宁 茗 祺 霖 菡 涵 晨</textarea>
    </div>
    <div></div>
    <div class="juxta">
        <p>第3声，上声：</p>
        <textarea id="src_3">可 语 晓 米 雨</textarea>
    </div>
    <div class="juxta">
        <p>第4声，去声：</p>
        <textarea id="src_4">若 艾 沐 蔚 亦 夏 乐 悦 韵 玥 钰</textarea>
    </div>

    <h3>喜欢的声调（空格分隔）</h3>
    <div class="juxta">
        <p>第二个字为第1声时，第三个字的声调：</p>
        <textarea id="pattern_1" class="tinybox">2 3 4</textarea>
    </div>
    <div class="juxta">
        <p>第二个字为第2声时，第三个字的声调：</p>
        <textarea id="pattern_2" class="tinybox">1 4</textarea>
    </div>
    <div></div>
    <div class="juxta">
        <p>第二个字为第3声时，第三个字的声调：</p>
        <textarea id="pattern_3" class="tinybox">2 4</textarea>
    </div>
    <div class="juxta">
        <p>第二个字为第4声时，第三个字的声调：</p>
        <textarea id="pattern_4" class="tinybox">1 2</textarea>
    </div>

    <div>
        <button onclick="print();">生成</button>
        <button onclick="clearNames();">清除</button>
    </div>
    <div id="outputdiv">
        <h3>Names:</h3>
    </div>

<script type="text/javascript">
    var tones = ["1", "2", "3", "4"];

    /**
     * Get data out from the text area.
     * Also remove duplication and spaces.
     * @param  {String} id The id for the textarea.
     * @return {Object}    A list of strings in the textarea.
     */
    var parse = function(id) {
        var ta = document.getElementById(id);   // textarea

        var results = [];
        var rawlist = ta.value.split(" ");
        for (var iraw = 0; iraw < rawlist.length; iraw++) {
            if (!rawlist[iraw]) {
                continue;
            }
            if (results.indexOf(rawlist[iraw]) !== -1) {
                continue;
            }
            results.push(rawlist[iraw]);
        }

        return results;
    };

    function print() {
        // init character sources
        var src = {};
        for (var itone = 0; itone < tones.length; itone++) {
            var tone = tones[itone];
            src[tone] = parse("src_" + tone);
        }

        // init patterns
        /**
         * The tone of second character => its possible tones of third characters
         * @type {Object}
         */
        var patterns = {};
        for (var itone = 0; itone < tones.length; itone++) {
            var tone = tones[itone];
            patterns[tone] = parse("pattern_" + tone);
        }

        /**
         * Given the 2nd and 3rd tone, return all possibilities.
         * @param  {String} second The tone of 2nd character.
         * @param  {String} third  The tone of 3rd character.
         * @return {Object}        A list of possible names.
         */
        var generate = function generate(second, third) {
            var results = [];

            var middles = src[second];
            var lasts = src[third];

            for (var imid = 0; imid < middles.length; imid++) {
                var char1 = middles[imid];
                for (var ilast = 0; ilast < lasts.length; ilast++) {
                    var char2 = lasts[ilast];
                    results.push("朱" + char1 + char2);
                }
            }

            return results;
        }

        var outputdiv = document.getElementById("outputdiv");
        outputdiv.innerHTML = "<h3>Names:</h3>";

        for (var itone = 0; itone < tones.length; itone++) {
            var second = tones[itone];
            var availables = patterns[second];
            for (var ithird = 0; ithird < availables.length; ithird++) {
                var third = availables[ithird];
                var names = generate(second, third);

                outputdiv.innerHTML += ("<h5>" + second + "声 - " + third + "声</h5>");
                outputdiv.innerHTML += "<p>";
                outputdiv.innerHTML += names.join(", ");
                outputdiv.innerHTML += "</p>";
            }
        }

        return;     // end of print()
    }

    /**
     * Clear the names output.
     */
    function clearNames() {
        var outputdiv = document.getElementById("outputdiv");
        outputdiv.innerHTML = "<h3>Names:</h3>";
    }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="author" content="Andriy Lin"/>
	<title>所有名字</title>
	<style type="text/css">
	body {
	margin: 50px;
	}
	textarea {
	width: 400px;
	height: 50px;
	font-size: 12pt;
	}
	.tinybox {
	height: 20px;
	}
	.juxta {
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
	}
	button {
	margin-top: 20px;
	margin-left: 10px;
	margin-right: 10px;
	font-size:15px;
	}
	</style>
	</head>

	<body class="all">
	<h3>喜欢的字（空格分隔）</h3>
	<div class="juxta">
	<p>第1声，阴平：</p>
	<textarea id="src_1">英卓琛萱之依初昕诗歆</textarea>
	</div>
	<div class="juxta">
	<p>第2声，阳平：</p>
	<textarea id="src_2">然宁茗祺霖菡涵晨</textarea>
	</div>
	<div></div>
	<div class="juxta">
	<p>第3声，上声：</p>
	<textarea id="src_3">可语晓米雨</textarea>
	</div>
	<div class="juxta">
	<p>第4声，去声：</p>
	<textarea id="src_4">若艾沐蔚亦夏乐悦韵玥钰</textarea>
	</div>

	<h3>喜欢的声调（空格分隔）</h3>
	<div class="juxta">
	<p>第二个字为第1声时，第三个字的声调：</p>
	<textarea id="pattern_1" class="tinybox">2 3 4</textarea>
	</div>
	<div class="juxta">
	<p>第二个字为第2声时，第三个字的声调：</p>
	<textarea id="pattern_2" class="tinybox">1 4</textarea>
	</div>
	<div></div>
	<div class="juxta">
	<p>第二个字为第3声时，第三个字的声调：</p>
	<textarea id="pattern_3" class="tinybox">2 4</textarea>
	</div>
	<div class="juxta">
	<p>第二个字为第4声时，第三个字的声调：</p>
	<textarea id="pattern_4" class="tinybox">1 2</textarea>
	</div>

	<div>
	<button onclick="print();">生成</button>
	<button onclick="clearNames();">清除</button>
	</div>
	<div id="outputdiv">
	<h3>Names:</h3>
	</div>

	<script type="text/javascript">
	var tones = ["1", "2", "3", "4"];

	/**
	* Get data out from the text area.
	* Also remove duplication and spaces.
	* @param {String} id The id for the textarea.
	* @return {Object} A list of strings in the textarea.
	*/
	var parse = function(id) {
	var ta = document.getElementById(id); // textarea

	var results = [];
	var rawlist = ta.value.split(" ");
	for (var iraw = 0; iraw < rawlist.length; iraw++) {
	if (!rawlist[iraw]) {
	continue;
	}
	if (results.indexOf(rawlist[iraw]) !== -1) {
	continue;
	}
	results.push(rawlist[iraw]);
	}

	return results;
	};

	function print() {
	// init character sources
	var src = {};
	for (var itone = 0; itone < tones.length; itone++) {
	var tone = tones[itone];
	src[tone] = parse("src_" + tone);
	}

	// init patterns
	/**
	* The tone of second character => its possible tones of third characters
	* @type {Object}
	*/
	var patterns = {};
	for (var itone = 0; itone < tones.length; itone++) {
	var tone = tones[itone];
	patterns[tone] = parse("pattern_" + tone);
	}

	/**
	* Given the 2nd and 3rd tone, return all possibilities.
	* @param {String} second The tone of 2nd character.
	* @param {String} third The tone of 3rd character.
	* @return {Object} A list of possible names.
	*/
	var generate = function generate(second, third) {
	var results = [];

	var middles = src[second];
	var lasts = src[third];

	for (var imid = 0; imid < middles.length; imid++) {
	var char1 = middles[imid];
	for (var ilast = 0; ilast < lasts.length; ilast++) {
	var char2 = lasts[ilast];
	results.push("朱" + char1 + char2);
	}
	}

	return results;
	}

	var outputdiv = document.getElementById("outputdiv");
	outputdiv.innerHTML = "<h3>Names:</h3>";

	for (var itone = 0; itone < tones.length; itone++) {
	var second = tones[itone];
	var availables = patterns[second];
	for (var ithird = 0; ithird < availables.length; ithird++) {
	var third = availables[ithird];
	var names = generate(second, third);

	outputdiv.innerHTML += ("<h5>" + second + "声 - " + third + "声</h5>");
	outputdiv.innerHTML += "<p>";
	outputdiv.innerHTML += names.join(", ");
	outputdiv.innerHTML += "</p>";
	}
	}

	return; // end of print()
	}

	/**
	* Clear the names output.
	*/
	function clearNames() {
	var outputdiv = document.getElementById("outputdiv");
	outputdiv.innerHTML = "<h3>Names:</h3>";
	}
	</script>
	</body>
	</html>