用html写一个可以检测多少汉字的dome需要CSS样式 需要居中显示 填写框 写美化点按钮放下面输入框在大点 在写个点击清空的按钮 按钮排序不正确写正规点其他的不更改把弹框改成显示
<!DOCTYPE html>
<html>
<head>
<title>汉字检测器</title>
<style>
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
h1{
text-align: center;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px #ccc;
background-color: #f5f5f5;
}
label{
font-weight: bold;
}
input[type="text"]{
width: 300px;
height: 100px;
font-size: 24px;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button{
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
margin-top: 10px;
}
button:hover{
background-color: #3e8e41;
}
.clear{
background-color: #f44336;
}
.clear:hover{
background-color: #d32f2f;
}
.result{
display: none;
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
text-align: center;
}
</style>
</head>
<body>
<h1>汉字检测器</h1>
<div class="container">
<label for="text">请输入文本：</label>
<input type="text" id="text" placeholder="在这里输入文本...">
<button id="check">检测</button>
<button id="clear" class="clear">清空</button>
<div id="result" class="result"></div>
</div>
<pre><code><script>
const textInput = document.getElementById("text");
const checkBtn = document.getElementById("check");
const clearBtn = document.getElementById("clear");
const resultDiv = document.getElementById("result");
checkBtn.addEventListener("click", function(){
const text = textInput.value.trim();
if(text === ""){
alert("请输入文本！");
return;
}
const chineseReg = /[\u4E00-\u9FA5\uF900-\uFA2D]/g;
const chineseCount = text.match(chineseReg).length;
resultDiv.innerHTML = `文本中共有${chineseCount}个汉字。`;
resultDiv.style.display = "block";
});
clearBtn.addEventListener("click", function(){
textInput.value = "";
resultDiv.style.display = "none";
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/NkH 著作权归作者所有。请勿转载和采集!