用html写一个可以检测多少汉字的dome需要CSS样式 需要居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检测汉字个数</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
input[type="text"] {
padding: 10px;
margin-bottom: 10px;
font-size: 16px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.result {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>检测汉字个数</h1>
<input type="text" id="input" placeholder="请输入汉字">
<button onclick="count()">检测</button>
<div class="result" id="result"></div>
</div>
<script>
function count() {
let input = document.getElementById("input").value;
let pattern = /[\u4e00-\u9fa5]/g;
let count = input.match(pattern).length;
document.getElementById("result").innerHTML = "汉字个数为：" + count;
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/Njj 著作权归作者所有。请勿转载和采集!