汉字计数器 - 在线检测文本中的汉字数量 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>汉字计数器</title>
	<style>
		body {
			background-color: #f7f7f7;
			font-family: Arial, Helvetica, sans-serif;
		}
<pre><code>	h1 {
		text-align: center;
		margin-top: 50px;
		margin-bottom: 30px;
		color: #333;
	}

	form {
		width: 50%;
		margin: 0 auto;
		background-color: #fff;
		padding: 20px;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}

	label {
		display: block;
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
	}

	input[type='text'] {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		border-radius: 5px;
		border: 1px solid #ccc;
		margin-bottom: 20px;
	}

	input[type='submit'] {
		background-color: #333;
		color: #fff;
		padding: 10px 20px;
		font-size: 18px;
		border-radius: 5px;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	input[type='submit']:hover {
		background-color: #444;
	}

	.result {
		display: none;
		margin-top: 20px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}

	.result p {
		font-size: 18px;
		color: #333;
		margin-bottom: 10px;
	}

	.result span {
		font-weight: bold;
		color: #333;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<h1>汉字计数器</h1>
	<form>
		<label for='text'>请输入需要检测的文本：</label>
		<input type='text' id='text' name='text' placeholder='在这里输入文本'>
		<input type='submit' value='检测'>
	</form>
	<div class='result'>
		<p>文本中包含<span id='count'>0</span>个汉字。</p>
	</div>
	<script>
		var textInput = document.getElementById('text');
		var countSpan = document.getElementById('count');
		var resultDiv = document.querySelector('.result');
<pre><code>	document.querySelector('form').addEventListener('submit', function(event) {
		event.preventDefault();
		var text = textInput.value;
		var count = 0;
		for (var i = 0; i &lt; text.length; i++) {
			if (text.charCodeAt(i) &gt;= 19968 &amp;&amp; text.charCodeAt(i) &lt;= 40869) {
				count++;
			}
		}
		countSpan.textContent = count;
		resultDiv.style.display = 'block';
	});
&lt;/script&gt;
</code></pre>
</body>
</html>