HTML 汉字字符计数器 - 在线检测汉字数量 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>汉字字符检测</title>
	<style>
		body {
			font-size: 20px;
			font-family: 'Microsoft Yahei', sans-serif;
		}
		input {
			width: 200px;
			height: 30px;
			font-size: 20px;
			padding-left: 10px;
			box-sizing: border-box;
			border: 1px solid #ccc;
		}
		button {
			width: 80px;
			height: 35px;
			font-size: 20px;
			background-color: #007bff;
			color: #fff;
			border: none;
			cursor: pointer;
		}
		.result {
			margin-top: 20px;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<h1>汉字字符检测</h1>
	<form>
		<label>请输入汉字字符串：</label>
		<input type='text' id='inputStr'>
		<button type='button' onclick='countChars()'>检测</button>
	</form>
	<div class='result' id='result'></div>
	<script>
		function countChars() {
			var str = document.getElementById('inputStr').value;
			var count = 0;
			for (var i = 0; i < str.length; i++) {
				if (str.charCodeAt(i) >= 19968 && str.charCodeAt(i) <= 40869) {
					count++;
				}
			}
			document.getElementById('result').innerHTML = '共输入了' + count + '个汉字';
		}
	</script>
</body>
</html>