原生JS验证码登录界面
效果图html页面结构css页面样式JavaScript页面行为效果图
html页面结构
页面的结构以input、label、canvas等标签组成
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录复刻7</title><link rel="stylesheet" href="style.css"></head><body><div class="wrapper"><div class="item"><input type="text" class="from-in" style="color: #999;" required='required'><label for="" class="from-lab">用户名</label></div><div class="item"><input type="text" class="from-in" style="color: #999;" required='required'><label for="" class="from-lab">密 码</label></div><div class="item"><input type="text" class="from-in" style="color: #999;" required='required'><label for="" class="from-lab">验证码</label><canvas id="myCanvas" width="200" height="40"></canvas><div><a href="#" class="refresh" onclick="refresh();">换一张</a></div><div><a href="#">忘记密码?</a></div><button class="from-btn">提交</button></div></div><script src="index.js"></script></body></html>
css页面样式
使用到的主要css属性为transform和transition
*{margin: 0;padding: 0;}html{background-color: rgba(10,168,29,1);}a{display: inline-block;text-decoration: none;margin: 0 15px 0 15px;color: #0f0;}a:hover{color: #fff;}.wrapper{width: 300px;height: 400px;margin: 100px auto;background-color: rgba(0,0,0,0.3);border-radius: 5px;position: relative;overflow: hidden;}.item{position: relative;color: #0f0;font-size: 15px;margin-top: 15px;}.from-lab{margin-left: 20px;position: absolute;z-index: 1;top: 5px;left: 0;-webkit-transition: all 0.3s;transition: all 0.3s;}.item input{width: 100%;position: relative;height: 35px;z-index: 3;background: none;border: none;padding: 5px;-webkit-transition: all 0.3s;transition: all 0.3s;border-bottom: 1px solid #0f0;outline: none;}.item input:valid{outline: none;}.from-lab:focus .from-in:valid{outline: none;color: #0f0;border-color: #0f0;}.from-in:focus + .from-lab,.from-in:valid + .from-lab{font-size: 12px;-ms-transform: translateY(-15px);-webkit-transform: translateY(-15px);transform: translateY(-15px);}.refresh{font-size: 15px;position: absolute;top: 72px;right: 0;cursor: pointer;}.from-btn{width: 100px;height: 30px;background-color: #0f0;color: rgba(0,0,0,0.5);outline: none;border: none;margin-top: 20px;margin-left: 100px;-webkit-transform: 0.3s;transform: 0.3s;cursor: pointer;}#myCanvas{margin: 20px;}.from-btn:hover{box-shadow: 0 0 0 rgba(0,0,0,0.5),0 3px 6px rgba(0,0,0,0.5),0 5px 10px rgba(0,0,0,0.5);}
JavaScript页面行为
此处随机生成的六位验证码过程请参考我的另一篇文章
var arr = [0,1,2,3,4,5,6,7,8,9];for(var i = 65; i < 123; i ++) {if(i > 90 && i < 97) {continue;}arr.push(String.fromCharCode(i));}function createCanvas() {var canvasStr = '';for(var i = 0; i < 6; i ++) {var str = arr[Math.floor(Math.random()*arr.length)];canvasStr += str + ' ';}var myCanvas = document.getElementById('myCanvas');var ctx = myCanvas.getContext('2d');var oImg = new Image();oImg.src = './images/bg.jpg';oImg.onload = function() {var pattern = ctx.createPattern(oImg,'repeat');ctx.fillStyle = pattern;ctx.fillRect(0,0,myCanvas.clientWidth,myCanvas.clientHeight);ctx.font = '25px Helvetica';ctx.textAlign = 'center';ctx.fillStyle = 'rgba(0,0,0,0.5)';ctx.fillText(canvasStr,myCanvas.width/2,30);}}createCanvas();function refresh() {createCanvas();}
