编写一个小程序页面显示你的真实姓名,班级,学号,并且显示一个按钮,按钮文字是“显示结果” ,点击按钮,弹出一行文字: 统计出我的学号中包含数字1的个数是:? 使用JavaScript计算出个数并替换上句话里的问号,
时间: 2024-10-11 13:11:54 浏览: 46
这是一个简单的HTML、CSS和JavaScript结合的小程序示例。首先,我们需要创建一个基本的HTML结构,然后添加一些样式,最后编写JavaScript函数来处理用户交互。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
#result {
display: none;
margin-top: 10px;
}
</style>
</head>
<body>
<h2>个人信息</h2>
<p id="name">真实姓名:张三</p>
<p id="class">班级:一班</p>
<p id="id">学号:123456</p>
<button onclick="countOne()">显示结果</button>
<div id="result" class="hidden"></div>
<script>
function countOne() {
var id = document.getElementById('id').textContent;
var oneCount = (id.match(/\d/g) || []).filter(num => num === '1').length;
// 显示结果显示
document.getElementById('result').classList.remove('hidden');
document.getElementById('result').innerText = `统计出我的学号中包含数字1的个数是:${oneCount}`;
}
</script>
</body>
</html>
```
在这个例子中,当你点击"显示结果"按钮时,`countOne`函数会被触发。它会获取学号元素的文本内容,查找所有数字字符,筛选出其中的'1',然后计算出现次数。最后,它会在名为`result`的隐藏元素中显示计数值。
阅读全文