一：效果图如下
二：实现代码
html:
<body>
<div class="container">
<form action="">
<h1>Login</h1>
<div class="form">
<div class="item">
<span>Username</span>
<input type="text" placeholder="Username" required/>
</div>
<div class="button">
<span>Password</span>
<input type="password" placeholder="Password" required/>
</div>
<div class="code">
<span>Verification</span>
<input type="text" id="text" required/>
<canvas id="canvas" width="100" height="35"></canvas>
</div>
</div>
<button type="submit" id="bt">Login</button>
</form>
</div>
</body>验证码 js:
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var button = document.getElementById("bt");//获取按钮
var input = document.getElementById("text");//获取输入框
picture();
canvas.onclick = function () {
context.clearRect(0, 0, 100, 40);//在给定的矩形内清除指定的像素
picture();
}
function picture() {
context.strokeRect(0, 0, 100, 35);//绘制矩形（无填充）
var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
// 绘制字母
var arr = [] //定义一个数组用来接收产生的随机数
var num //定义容器接收验证码
for (var i = 0; i < 4; i++) {
var x = 20 + i * 20;//每个字母之间间隔20
var y = 15 + 5 * Math.random();//y轴方向位置为20-30随机
var index = Math.floor(Math.random() * aCode.length);//随机索引值
var txt = aCode[index];
context.font = "bold 20px 微软雅黑";//设置或返回文本内容的当前字体属性
// context.fillStyle=getColor();//设置或返回用于填充绘画的颜色、渐变或模式，随机
context.translate(x,y);
var deg=90*Math.random()*Math.PI/180;//0-90度随机旋转
context.rotate(deg);// 旋转当前绘图
context.fillText(txt, 0, 0);//在画布上绘制“被填充的”文本
context.rotate(-deg);//将画布旋转回初始状态
context.translate(-x,-y);//将画布移动回初始状态
arr[i] = txt //接收产生的随机数
}
num = arr[0] + arr[1] + arr[2] + arr[3] //将产生的验证码放入num
// 绘制干扰线条
for (var i = 0; i < 8; i++) {
context.beginPath();//起始一条路径，或重置当前路径
context.moveTo(Math.random() * 100, Math.random() * 35);//把路径移动到画布中的随机点，不创建线条
context.lineTo(Math.random() * 100, Math.random() * 35);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
// context.strokeStyle=getColor();//随机线条颜色
context.stroke();// 绘制已定义的路径
}
// 绘制干扰点，和上述步骤一样，此处用长度为1的线代替点
for (var i = 0; i < 20; i++) {
context.beginPath();
var x = Math.random() * 100;
var y = Math.random() * 35;
context.moveTo(x, y);
context.lineTo(x + 1, y + 1);
// context.strokeStyle=getColor();
context.stroke();
}
//点击按钮验证
button.onclick = function () {
var text = input.value //获取输入框的值
if (text === num) {
alert('验证通过')
} else {
alert('验证失败')
}
}
}
}
</script>css:
<style>
body{
background-image: url(./img/bink.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
opacity: 1;
}
.container{
width: 30%;
height: auto;
margin: 0 auto;
margin-top: 10%;
text-align: center;
background: #00000090;
border-radius: 3px;
box-shadow: -3px -3px 8px 3px rgb(197, 169, 169);
padding: 20px 50px;
}
.container h1{
color: aliceblue;
}
.button,.item,.code{
margin-top: 15px;
display: inline-flex;
}
.button,.item,.code> span{
margin-left:20px ;
float: left;
font-size: 18px;
color: rgb(195, 121, 121);
}
input{
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid rgb(134, 133, 133);
padding: 5px 10px;
background: #99989800;
color: #fff;
}
input:focus{
outline: none;
}
form> button{
margin-top: 15px;
width: 180px;
height: 30px;
font-size: 20px;
font-weight: 400;
color: #fff;
border: 0;
border-radius: 15px;
background-image: linear-gradient(to right, #cf9696 0%, #e67065 100%);
}
form> button:hover{
box-shadow: -1px -1px 8px 3px rgb(197, 169, 169);
}
</style>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
