html实现生成随机字母数字,并且检测输入框中输入是否为这串字母数字
时间: 2023-06-10 07:09:04 浏览: 68
可以通过JavaScript来实现生成随机字母数字,并且检测输入框中输入是否为这串字母数字,然后再将它们渲染到HTML页面中。以下是一个简单的实现:
HTML代码:
```html
<div>
<p id="random-string"></p>
<input type="text" id="input-string" placeholder="请输入随机字符串">
<button onclick="checkString()">检测</button>
<p id="result"></p>
</div>
```
JavaScript代码:
```javascript
function generateRandomString(length) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
function renderRandomString() {
const randomString = generateRandomString(10); // 生成10位随机字母数字
document.getElementById('random-string').innerText = randomString;
document.getElementById('input-string').value = '';
document.getElementById('result').innerText = '';
}
function checkString() {
const randomString = document.getElementById('random-string').innerText;
const inputString = document.getElementById('input-string').value;
if (inputString === '') {
alert('请输入字符串');
return;
}
if (inputString === randomString) {
document.getElementById('result').innerText = '输入正确';
} else {
document.getElementById('result').innerText = '输入错误';
}
}
```
在这个实现中,首先定义了一个 `generateRandomString()` 函数,用于生成随机字母数字。然后定义了一个 `renderRandomString()` 函数,用于将生成的随机字母数字渲染到页面中。最后定义了一个 `checkString()` 函数,用于检测输入框中输入的字符串是否与生成的随机字母数字相等,并将检测结果渲染到页面中。