用HBuilder,制作html页面。题目:1、单击按钮随机生成四位验证码,验证码中含大小写a-f、A-F及数字0-5 2、仿照京东页面,编写代码,实现倒计时效果 3、统计字符串"abcoefoxyozzopp"中字符o出现的位置及次数
时间: 2024-02-03 08:02:32 浏览: 101
好的,我将分别回答您的三个问题。
1、生成四位验证码的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>生成四位验证码</title>
<meta charset="utf-8">
<style type="text/css">
#code {
width: 150px;
height: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
</head>
<body>
<button id="code" onclick="generateCode()">生成验证码</button>
<script type="text/javascript">
function generateCode() {
var code = "";
var str = "abcdefABCDEF012345";
for (var i = 0; i < 4; i++) {
var index = Math.floor(Math.random() * str.length);
code += str.charAt(index);
}
document.getElementById("code").innerHTML = code;
}
</script>
</body>
</html>
```
2、实现倒计时效果的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>倒计时效果</title>
<meta charset="utf-8">
<style type="text/css">
#countdown {
width: 150px;
height: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="countdown"></div>
<script type="text/javascript">
var time = 60; // 设置倒计时时间,单位为秒
var countdown = document.getElementById("countdown");
countdown.innerHTML = time + "s";
var timer = setInterval(function() {
time--;
if (time == 0) {
clearInterval(timer);
countdown.innerHTML = "倒计时结束";
} else {
countdown.innerHTML = time + "s";
}
}, 1000);
</script>
</body>
</html>
```
3、统计字符串中字符o出现的位置及次数的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>统计字符o出现的位置及次数</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}
thead tr {
background-color: #eee;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>位置</td>
<td>次数</td>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
<script type="text/javascript">
var str = "abcoefoxyozzopp";
var result = document.getElementById("result");
var count = 0;
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == "o") {
count++;
var row = document.createElement("tr");
var indexCell = document.createElement("td");
var countCell = document.createElement("td");
indexCell.innerHTML = i + 1;
countCell.innerHTML = count;
row.appendChild(indexCell);
row.appendChild(countCell);
result.appendChild(row);
}
}
</script>
</body>
</html>
```
希望能够帮助您解决问题。
阅读全文