HTML 检测汉字个数代码示例:带 CSS 美化和居中显示
<!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>
原文地址: https://www.cveoy.top/t/topic/l5mY 著作权归作者所有。请勿转载和采集!