这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战。
今天用javascript编写了一个获取验证码的简单程序，下面是整体的思路以及相关核心代码。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、验证码区域
2、切换验证码链接(看不清，换一张)
3、输入验证码区域
4、提交验证区域
<main>
<div class="show_code">
<span class="code" id="checkCode">abcd3d</span>
<a id="linkbt">看不清换一张</a>
</div>
<div class="input_code">
<label for="inputcode">验证码：</label>
<input type="text" id="inputCode">
<span id="text_show"></span>
</div>
<div class="button">
<input type="button" id="ok_button" value="确定">
</div>
</main>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息官网登录的简单版本，样式如下：
三、Javascript特效
（一）验证码结构要求有：
1、验证码为6位数
2、验证码包含数字、大写字母和小写字母
本次使用的生成符合范围验证码的方法为：设置验证码区间内的ASIIC码范围，利用随机函数，随机生成该范围内的ASIIC码值。 各部分的ASIIC码范围如下：
0-9:48-57
A-Z:65-90
a-z:97-122
（二）生成单个随机验证码
代码如下：
let createCode = (num) => {
// let nums = Math.floor(Math.random() * 10 + 48) //[48,58)
// let charA = Math.floor(Math.random() * 26 + 65) //[65,91)
// let chara = Math.floor(Math.random() * 26 + 97) //[97,123)
let codeStr = "";
do {
let temp = Math.floor(Math.random() * 123); //[0,123)
if (isValid(temp)) {
codeStr += String.fromCodePoint(temp);
}
} while (codeStr.length < 6)
return codeStr;
}
（三）看不清，换一张
点击链接“看不清，换一张”，就更新验证码区域内容，重新生成六个随机数，代码如下：
linkbt.addEventListener('click', () => {
checkCode.innerText = createCode(6);
textShow.innerText = "";
inputCode.value = "";
})
（四）提交验证码
点击确定按钮，验证码与输入是否相同，相同调整页面，不同关系验证码，清空输入框
