用html写一个可以检测多少汉字的dome需要CSS样式 需要居中显示 填写框 写美化点
<!DOCTYPE html>
<html>
<head>
<title>汉字计数器</title>
<style>
body {
text-align: center;
}
h1 {
font-size: 36px;
margin-top: 50px;
}
p {
font-size: 24px;
margin-top: 20px;
}
input[type=text] {
width: 300px;
height: 40px;
font-size: 24px;
margin-top: 20px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
.btn {
display: inline-block;
background-color: #007bff;
color: #fff;
font-size: 24px;
border: none;
border-radius: 10px;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<h1>汉字计数器</h1>
<p>输入你想检测的内容：</p>
<input type="text" id="inputText" placeholder="在这里输入...">
<button class="btn" onclick="countHan()">检测汉字</button>
<p id="result"></p>
<pre><code><script>
function countHan() {
let inputText = document.getElementById('inputText').value;
let count = 0;
for (let i = 0; i < inputText.length; i++) {
let charCode = inputText.charCodeAt(i);
if (charCode >= 0x4e00 && charCode <= 0x9fff) {
count++;
}
}
document.getElementById('result').innerHTML = '共检测到 ' + count + ' 个汉字。';
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Njz 著作权归作者所有。请勿转载和采集!