2020.8.19
目标
我的第一次尝试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="login">
<div>
真实姓名：<input type="text" id="name" value="" required><br>
二代身份证号码：<input type="text" id="haoma" placeholder="请输入二代身份证号码，当前仅支持二代身份证" maxlength="11" value="" required><br>
绑定手机号：<input type="text" id="phone" value="" required><br>
推荐人手机号(可选)：<input type="text" id="peoplephone" value="" ><br>
图片验证码：<input type="text" id="picture" value="" >
<canvas id="canvas" width="100" height="25" οnclick="dj()"
style="border: 1px solid #ccc;border-radius: 5px;"></canvas>
</div>
<div class="remember-me">
<input type="radio">
我已全部阅读并同意遵守<a href="">《宁波银行电子账户开户须知》</a>以及<a href="">《扣款协议》</a>
</div>
<div>
<input type="submit" value="立刻申请" />
</div>
<div>
温馨提示：请使用IE8及以上版本浏览器
</div>
<script>
var show_num = [];
draw(show_num);
function dj(){
draw(show_num);
}
function sublim(){
var val=document.getElementById("text").value;
var num = show_num.join("");
if(val==''){
alert('请输入验证码！');
}else if(val == num){
alert('提交成功！');
document.getElementById(".input-val").val('');
draw(show_num);
}else{
alert('验证码错误！\n你输入的是: '+val+"\n正确的是: "+num+'\n请重新输入！');
document.getElementById("text").value='';
draw(show_num);
}
}
function draw(show_num) {
var canvas_width=document.getElementById('canvas').clientWidth;
var canvas_height=document.getElementById('canvas').clientHeight;
var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
var aCode = sCode.split(",");
var aLength = aCode.length;//获取到数组的长度
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt;
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
function randomColor() {//得到随机的颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</form>
</body>
</html>
我的第二次尝试：
默认框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form name="myForm" οnsubmit="return checkForm()" method="get">
<table id="table">
<tr>
<td class="lab">真实姓名：</td>
<td>
<input type="text" name="name" class="txt">
</td>
</tr>
<tr>
<td class="lab">二代身份证号码：</td>
<td>
<input type="text" name="sfz" placeholder="请输入二代身份证号码，当前仅支持二代身份证" class="txt">
</td>
</tr>
<tr>
<td class="lab">绑定手机号：</td>
<td>
<input type="text" name="tel1" class="txt">
</td>
</tr>
<tr>
<td class="lab">推荐人手机号（可选）：</td>
<td>
<input type="text" name="tel2" class="txt">
</td>
</tr>
<tr>
<td class="lab">图片验证码：</td>
<td>
<input type="text" name="yzm" placeholder="不区分大小写" class="txt">
</td>
<td>
<div id="code_box">Af3D</div>
</td>
</tr>
<tr>
<td colspan="3" class="row" id="xy">
<input type="checkbox" name="check" id="check">
我已全部阅读并遵守<a href="#" class="href">《宁波银行电子账户开户须知》</a>以及<a href="#" class="href">《扣款协议》</a>
</td>
</tr>
<tr>
<td colspan="3" class="row">
<input type="submit" value="立刻申请" id="button">
</td>
</tr>
<tr>
<td colspan="3" class="row" id="last">
温馨提示：请使用IE8及以上版本浏览器
</td>
</tr>
</table>
</form>
</body>
</html>
HTML 标签的 colspan 属性
colspan 属性规定单元格可横跨的列数
<html>
<body>
<table width="100%" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
</body>
</html>
html里面的class
class 属性定义了元素的类名。
class 属性通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名
下一步尝试css
#table {
margin: auto;
}
tr{
height: 40px;
text-align:center;
}
.txt {
outline: none;
border-radius: 4px;
border: 0.5px solid gray;
width: 280px;
height: 30px;
font-size: 12px;
color: gray;
}
.lab{
float:right;
font-size: 14px;
color: gray;
}
.row{
text-align:center;
font-size: 14px;
}
#xy {
color: black;
font-size: 13px;
}
.href{
color: red;
text-decoration: none;
}
#check{
background-color: transparent;
border: 5px;
border-radius: 2px;
}
#button{
width: 75px;
height: 25px;
outline: none;
border-radius: 4px;
border: 0.5px solid red;
background: red;
color: white;
font-size: 11px;
}
#last{
color: gray;
font-size: 12px;
}
#yzm{
width: 75px;
height: 25px;
}
代码放于head中。
为啥CSS中最前面有的是.有的是#？
id对应#
class对应.
1 没有加css的图：
2 加table的图：
#table {
margin: auto;
}
tr{
height: 40px;
text-align:center;
}
table可选的属性
border 规定表格边框的宽度。
css text-align:
text-align 属性规定元素中的文本的水平对齐方式。
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
CSS margin 属性
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。
css height
height 属性设置元素的高度。
.txt {
outline: none;
border-radius: 4px;
border: 0.5px solid gray;
width: 280px;
height: 30px;
font-size: 12px;
color: gray;
}
css outline
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS3 border-radius 属性
border-radius 属性允许您向元素添加圆角。
CSS border 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
css font-size
font-size属性可设置字体的尺寸。
CSS text-decoration 属性
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
CSS background-color 属性
color_name 规定颜色值为颜色名称的背景颜色（比如 red）。
hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
transparent 默认。背景颜色为透明。
inherit 规定应该从父元素继承 background-color 属性的设置。
到这里，css基本上看懂了。后续有css看不懂的可以再补充。
下一步尝试javascript
<script>
function checkForm(){
var name=document.forms["myForm"]["name"].value;
var sfz=document.forms["myForm"]["sfz"].value;
var tel1=document.forms["myForm"]["tel1"].value;
var tel2=document.forms["myForm"]["tel2"].value;
var yzm=document.forms["myForm"]["yzm"].value;
var check=document.getElementById("check").checked;
if (name==""){
alert("请输入姓名！");
return false;
}
var sfzPatt=/^[0-9]{17}[0-9 X]$/;
if (!sfzPatt.test(sfz)){
alert("身份证格式错误！");
return false;
}
var telPatt=/^1[0-9]{10}$/;
if (telPatt.test(tel1)==false){
alert("手机号格式错误！");
return false;
}
if (tel2!="" && telPatt.test(tel2)==false){
alert("推荐人手机号格式错误！");
return false;
}
var yzmPatt=/^[0-9 a-z A-Z]{4}$/;
if (yzm.length != 4 || !yzmPatt.test(yzm)){
alert("验证码错误！");
return false;
}
if (!check){
alert("请阅读协议！");
return false;
}
var custom={
"姓名" : name,
"身份证号" : sfz,
"绑定手机号" : tel1,
"推荐人手机号" : tel2
};
console.log(custom);
}
</script>
JavaScript var 语句
var 语句用于声明变量。
JavaScript 变量的创建也叫作"声明"一变量:
JavaScript function 语句
function 语句用于声明一个函数。
函数声明后，我们可以在需要的时候调用。
在 JavaScript 中，函数是对象，函数也有属性和方法。
HTML DOM Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象集合
集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
Document 对象属性
属性 描述
body 提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
Document 对象方法
方法 描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
HTML DOM forms 集合
语法 document.forms[]
forms 集合可返回对文档中所有 Form 对象的引用。
HTML DOM getElementById() 方法
语法 document.getElementById(id)
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
HTML DOM alert() 方法
语法 alert(message)
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
参数 描述
message 要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）
JavaScript正则表达式
因为长度问题，我单独写了一篇博客，链接如下：前端学习之JavaScript正则表达式2020.8.20
/^[0-9]{17}[0-9 X]$/
以数字0到9开头，出现17次，最后一位是0-9或者X
下一步进行图形验证码
比较长，单独设置一个章节，链接：前端学习之图形验证码2020.8.20
最后，我完成了图形验证码，整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#table {
margin: auto;
}
tr{
height: 40px;
text-align:center;
}
.txt {
outline: none;
border-radius: 4px;
border: 0.5px solid gray;
width: 280px;
height: 30px;
font-size: 12px;
color: gray;
}
.lab{
float:right;
font-size: 14px;
color: gray;
}
.row{
text-align:center;
font-size: 14px;
}
#xy {
color: black;
font-size: 13px;
}
.href{
color: red;
text-decoration: none;
}
#check{
background-color: transparent;
border: 5px;
border-radius: 2px;
}
#button{
width: 75px;
height: 25px;
outline: none;
border-radius: 4px;
border: 0.5px solid red;
background: red;
color: white;
font-size: 11px;
}
#last{
color: gray;
font-size: 12px;
}
#yzm{
width: 75px;
height: 25px;
}
</style>
<script>
function checkForm(){
var name=document.forms["myForm"]["name"].value;
var sfz=document.forms["myForm"]["sfz"].value;
var tel1=document.forms["myForm"]["tel1"].value;
var tel2=document.forms["myForm"]["tel2"].value;
var yzm=document.forms["myForm"]["yzm"].value;
var check=document.getElementById("check").checked;
if (name==""){
alert("请输入姓名！");
return false;
}
var sfzPatt=/^[0-9]{17}[0-9X]$/;
if (!sfzPatt.test(sfz)){
alert("身份证格式错误！");
return false;
}
var telPatt=/^1[0-9]{10}$/;
if (telPatt.test(tel1)==false){
alert("手机号格式错误！");
return false;
}
if (tel2!="" && telPatt.test(tel2)==false){
alert("推荐人手机号格式错误！");
return false;
}
if (!check){
alert("请阅读协议！");
return false;
}
var custom={
"姓名" : name,
"身份证号" : sfz,
"绑定手机号" : tel1,
"推荐人手机号" : tel2
};
console.log(custom);
}
</script>
</head>
<body>
<form name="myForm" οnsubmit="return checkForm()" method="get">
<table id="table">
<tr>
<td class="lab">真实姓名：</td>
<td>
<input type="text" name="name" class="txt">
</td>
</tr>
<tr>
<td class="lab">二代身份证号码：</td>
<td>
<input type="text" name="sfz" placeholder="请输入二代身份证号码，当前仅支持二代身份证" class="txt">
</td>
</tr>
<tr>
<td class="lab">绑定手机号：</td>
<td>
<input type="text" name="tel1" class="txt">
</td>
</tr>
<tr>
<td class="lab">推荐人手机号（可选）：</td>
<td>
<input type="text" name="tel2" class="txt">
</td>
</tr>
<tr>
<td class="lab">图片验证码：</td>
<td>
<input type="text" id="picture" name="yzm" placeholder="不区分大小写" class="txt">
</td>
<td>
<canvas id="canvas" width="100" height="25" οnclick="dj()" style="border: 1px solid #ccc;border-radius: 5px;"></canvas>
</td>
</tr>
<tr>
<td colspan="3" class="row" id="xy">
<input type="checkbox" name="check" id="check">
我已全部阅读并遵守<a href="#" class="href">《宁波银行电子账户开户须知》</a>以及<a href="#" class="href">《扣款协议》</a>
</td>
</tr>
<tr>
<td colspan="3" class="row">
<input type="submit" value="立刻申请" id="button" οnclick="sublim()">
</td>
</tr>
<tr>
<td colspan="3" class="row" id="last">
温馨提示：请使用IE8及以上版本浏览器
</td>
</tr>
</table>
</form>
<script>
var show_num = [];
draw(show_num);
function dj(){
draw(show_num);
}
function sublim(){
var val=document.getElementById("picture").value;
var num = show_num.join("");
if(val==''){
alert('请输入验证码！');
}else if(val.toUpperCase() == num.toUpperCase()){
document.getElementById(".input-val").val('');
draw(show_num);
}else{
alert('验证码错误！');
document.getElementById("picture").value='';
draw(show_num);
}
}
function draw(show_num) {
var canvas_width=document.getElementById('canvas').clientWidth;
var canvas_height=document.getElementById('canvas').clientHeight;
var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
canvas.width = canvas_width;
canvas.height = canvas_height;
var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
var aCode = sCode.split(",");
var aLength = aCode.length;//获取到数组的长度
for (var i = 0; i <= 3; i++) {
var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
var txt = aCode[j];//得到随机的一个内容
show_num[i] = txt;
var x = 10 + i * 20;//文字在canvas上的x坐标
var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
context.font = "bold 23px 微软雅黑";
context.translate(x, y);
context.rotate(deg);
context.fillStyle = randomColor();
context.fillText(txt, 0, 0);
context.rotate(-deg);
context.translate(-x, -y);
}
for (var i = 0; i <= 5; i++) { //验证码上显示线条
context.strokeStyle = randomColor();
context.beginPath();
context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
context.stroke();
}
for (var i = 0; i <= 30; i++) { //验证码上显示小点
context.strokeStyle = randomColor();
context.beginPath();
var x = Math.random() * canvas_width;
var y = Math.random() * canvas_height;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
context.stroke();
}
}
function randomColor() {//得到随机的颜色值
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</body>
</html>
皆大欢喜，有问题再补充。
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
