用html写一个可以检测多少汉字的dome需要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(/[\u4e00-\u9fa5]/)) {
hanCount++;
}
}
document.getElementById("result").innerHTML = "文本中共有 " + hanCount + " 个汉字。";
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/NjQ 著作权归作者所有。请勿转载和采集!