在线汉字计数器：检测文本中的汉字数量
<!DOCTYPE html>
<html>
<head>
<title>在线汉字计数器</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 50px;
}
.container {
margin-top: 50px;
display: inline-block;
text-align: left;
}
textarea {
width: 400px;
height: 200px;
resize: none;
font-size: 18px;
padding: 10px;
border-radius: 10px;
border: 2px solid #ccc;
margin-bottom: 20px;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
margin-bottom: 20px;
}
button:hover {
background-color: #3e8e41;
}
.clear {
background-color: #f44336;
color: white;
padding: 14px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
margin-left: 20px;
}
.clear:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<h1>在线汉字计数器</h1>
<div class='container'>
<textarea id='input' placeholder='在这里输入文本'></textarea>
<button onclick='count()'>检测</button>
<button class='clear' onclick='clearInput()'>清空</button>
<p>输入的文本中包含 <span id='count'>0</span> 个汉字。</p>
</div>
<pre><code><script>
function count() {
let input = document.getElementById('input').value;
let count = 0;
for (let i = 0; i < input.length; i++) {
if (input.charCodeAt(i) >= 0x4e00 && input.charCodeAt(i) <= 0x9fff) {
count++;
}
}
document.getElementById('count').innerHTML = count;
}
function clearInput() {
document.getElementById('input').value = '';
document.getElementById('count').innerHTML = '0';
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/l5ns 著作权归作者所有。请勿转载和采集!