<!DOCTYPE html>
<html>
<head>
	<title>检测汉字个数</title>
	<style>
		body {
			text-align: center;
		}
		h1 {
			margin-top: 50px;
		}
		#input {
			width: 500px;
			height: 200px;
			font-size: 24px;
			margin-top: 50px;
			border-radius: 10px;
			border: 2px solid gray;
			padding: 10px;
		}
		#result {
			font-size: 36px;
			margin-top: 20px;
		}
		button {
			margin-top: 20px;
			padding: 10px 20px;
			font-size: 24px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
		button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<h1>检测汉字个数</h1>
	<textarea id='input' placeholder='请输入文本'></textarea>
	<div id='result'></div>
	<button onclick='countHan()'>检测汉字个数</button>
	<script>
		function countHan() {
			var inputText = document.getElementById('input').value;
			var hanCount = 0;
			for (var i = 0; i < inputText.length; i++) {
				if (inputText.charAt(i).match(/[一-龥]/)) {
					hanCount++;
				}
			}
			document.getElementById('result').innerHTML = '文本中共有 ' + hanCount + ' 个汉字。';
		}
	</script>
</body>
</html>
HTML 检测汉字个数代码示例:带 CSS 美化和居中显示

原文地址: https://www.cveoy.top/t/topic/l5mY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录