用html写一个可以检测多少汉字的dome需要CSS样式 需要居中显示 填写框 写美化点按钮放下面输入框在大点 在写个点击清空的按钮
<!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/Nj8 著作权归作者所有。请勿转载和采集!