图书管理系统之带验证码登录界面

学生成绩管理系统之带验证码登录界面

学生信息管理系统之带验证码登录界面

课程管理系统之带验证码登录界面

这次我们在前者登录界面的基础上增添验证码这一功能，目的是使用户登录更加安全，我们首先要掌握验证码功能的实现需要使用随机函数，在26个英文字母大小写加基本阿拉伯数字随机取值四个也就是说这个选择是C62选4，在以下中选择：

'1','2','3','4','5','6','7','8','9','0',
'a','b','c','d','e','f','g','h','i','j','k','l',
'm','n','o','p','q','r','s','t',
'u','v','w','x','y','z',
'A','B','C','D','E','F','G','H','I','J',
'K','L','M','N','O','P','Q','R','S','T',
'U','V','W','X','Y','Z'

很简单的一个随机取值循环

for(var i = 0; i<4; i++){// 随机获取一个数组的下标var r = parseInt(Math.random()*arrays.length);codes += arrays[r];
}

原来是满足一个账号和密码与数据库中存储的一致即可通过，点击“登录”按钮即跳转到系统主页面，但增添验证码这一功能后，就要保证两个条件：
1.账号密码与数据库中存储一致；
2.验证码填写正确。

这样一个带验证码的登录前端界面我们就完成了。
以下是程序：

<!DOCTYPE html>
<html lang="en">
<head>
<title>前端验证码登录</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {margin: 0;overflow: hidden;background: linear-gradient(to bottom, #DEB887, #095f88);background-size:1400% 300%;animation: dynamics 6s ease infinite;-webkit-animation: dynamics 6s ease infinite;-moz-animation: dynamics 6s ease infinite;font-size: 14px;color: yellow;min-height: 700px;}/*登录样式*/.main {position: fixed;text-align: center;top: 182px;width: 100%;height: auto;display: flex;justify-content: center;}.login {width: 470px;height:470px;background: linear-gradient(to bottom, #19778c, #095f88);animation: dynamics 6s ease infinite;-webkit-animation: dynamics 6s ease infinite;-moz-animation: dynamics 6s ease infinite;opacity: 0.9;border: solid 1px #13a1fc;background-size:1400% 300%;}@keyframes dynamics {0% {background-position: 0% 0%;}50% {background-position: 50% 100%;}100% {background-position: 100% 0%;}}.log-con {background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top,linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top,linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom,linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom;background-repeat: no-repeat;background-size: 3px 20px, 20px 3px;height: 100%;margin: -2px;padding: 3px 1px 1px 0;border-radius: 3px;}.log-con >span {font-size: 30px;font-weight: bold;line-height: 24px;letter-spacing: 2px;display: block;margin: 20px 0 44px 0;}.log-con >span::after {display: block;content: '';width: 57px;height: 3px;background: #ffffff;margin-top: 16px;justify-content: center;position: relative;left: 206px;}.log-con>input {display: block;margin: 10px 0 32px 70px;width: 330px;height: 42px;background-color: #ffffff;border-radius: 4px;opacity: 0.9;border: 0;font-size: 16px;outline: none;padding-left: 10px;color: #000000;}.log-con>a {width: 340px;height: 44px;background-color: #0090ff;border-radius: 4px;display: block;margin: 10px 0 0 70px;text-align: center;line-height: 44px;cursor: pointer;opacity: 1;}input::-webkit-input-placeholder {color: #000000;font-size: 16px;}.log-con>.code {width: 216px;display: inline-block;margin-left: 6px;}.log-con>#code {width: 94px;display: inline-block;margin-left: 14px;cursor: pointer;}/*logo*/.logo {width: 168px;height: 75px;position: fixed;left: 150px;top: 26px;}.logo>img {max-width: 100%;max-height: 100%;}/*版权样式*/.copyright {position: fixed;bottom: 10px;font-size: 16px;display: block;width: 100%;text-align: center;}
</style></head>
<body><div class="main"><div class="login"><div class="log"><span>登录</span><input type="text" class="name" placeholder="来将可留姓名"><input type="text" class="password" placeholder="请输入您的密码"><input type="text" class="code" placeholder="请输入验证码"><input type="button" id="code" onClick="change();"><a>立即登录</a></div></div>
</div><script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript">var SEPARATION = 100, AMOUNTX = 60, AMOUNTY = 40;var container;var camera, scene, renderer;var particles, particle, count = 0;var mouseX = 0, mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;$(function () {init();        //初始化animate(); //动画效果change(); //验证码});//初始化function init() {container = document.createElement( 'div' );   document.body.appendChild( container );         /camera = new THREE.PerspectiveCamera( 120, window.innerWidth / window.innerHeight, 1, 1500 );     camera.position.set(0,450,2000);        scene = new THREE.Scene();         particles = new Array();var PI2 = Math.PI * 2;var material = new THREE.ParticleCanvasMaterial( {color: 0x0f96ff,vertexColors:true,size: 4,program: function ( context ) {context.beginPath();context.arc( 0, 0, 0.01, 0, PI2, true );    context.fill();}} );//设置长条粒子的大小颜色长度等var materialY = new THREE.ParticleCanvasMaterial( {color: 0xffffff,vertexColors:true,size: 1,program: function ( context ) {context.beginPath();//绘制渐变色的矩形var lGrd = context.createLinearGradient(-0.008,0.25,0.016,-0.25);lGrd.addColorStop(0, '#16eff7');lGrd.addColorStop(1, '#0090ff');context.fillStyle = lGrd;context.fillRect(-0.008,0.25,0.016,-0.25);  //注意此处的坐标大小//绘制底部和顶部圆圈context.fillStyle = "#0090ff";context.arc(0, 0, 0.008, 0, PI2, true);    //绘制底部圆圈context.fillStyle = "#16eff7";context.arc(0, 0.25, 0.008, 0, PI2, true);    //绘制顶部圆圈context.fill();context.closePath();//绘制顶部渐变色光圈var rGrd = context.createRadialGradient(0, 0.25, 0, 0, 0.25, 0.025);rGrd.addColorStop(0, 'transparent');rGrd.addColorStop(1, '#16eff7');context.fillStyle = rGrd;context.arc(0, 0.25, 0.025, 0, PI2, true);    //绘制一个圆圈context.fill();}} );//循环判断创建随机数选择创建粒子或者粒子条var i = 0;for ( var ix = 0; ix < AMOUNTX; ix ++ ) {for ( var iy = 0; iy < AMOUNTY; iy ++ ) {var num = Math.random()-0.1;if (num >0 ) {particle = particles[ i ++ ] = new THREE.Particle( material );console.log("material")}else {particle = particles[ i ++ ] = new THREE.Particle( materialY );console.log("materialY")}//particle = particles[ i ++ ] = new THREE.Particle( material );particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );scene.add( particle );}}renderer = new THREE.CanvasRenderer();renderer.setSize( window.innerWidth, window.innerHeight );container.appendChild( renderer.domElement );//document.addEventListener( 'mousemove', onDocumentMouseMove, false );//document.addEventListener( 'touchstart', onDocumentTouchStart, false );//document.addEventListener( 'touchmove', onDocumentTouchMove, false );window.addEventListener( 'resize', onWindowResize, false );}//浏览器大小改变时重新渲染function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {requestAnimationFrame( animate );render();}//将相机和场景渲染到页面上function render() {var i = 0;//更新粒子的位置和大小for (var ix = 0; ix < AMOUNTX; ix++) {for (var iy = 0; iy < AMOUNTY; iy++) {particle = particles[i++];//更新粒子位置particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50);//更新粒子大小particle.scale.x =  particle.scale.y = particle.scale.z  = ( (Math.sin((ix + count) * 0.3) + 1) * 4 + (Math.sin((iy + count) * 0.5) + 1) * 4 )*50;  //正常情况下再放大100倍*1200}}renderer.render( scene, camera );count += 0.1;}//验证码function change() {code=$("#code");// 验证码组成库var arrays = new Array('1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');codes='';// 重新初始化验证码for(var i = 0; i<4; i++){// 随机获取一个数组的下标var r = parseInt(Math.random()*arrays.length);codes += arrays[r];}// 验证码添加到input里code.val(codes);}
</script>
<div style="text-align:center;">
</div>
</body>
</html>

图书管理系统之带验证码登录界面相关推荐

原生JS验证码登录界面
原生JS验证码登录界面效果图 html页面结构 css页面样式 JavaScript页面行为效果图 html页面结构页面的结构以input.label.canvas等标签组成 <!DOCT ...
qt实现汽车销售管理系统（一）-- 登录界面的实现
实现思路运行程序–>登录界面–>验证用户名和密码–>进入主界面数据库设计数据库的实现创建一个cardb数据库,并使用该数据库 create database cardb; u ...
java通过HtmlUnit工具和J4L实现模拟带验证码登录
1.HtmlUnit 1.1介绍 HtmlUnit是一个用java编写的无界面浏览器,建模html文档,通过API调用页面,填充表单,点击链接等等.如同正常浏览器一样操作.典型应用于测试以及从网页抓取 ...
【纯JavaSE】图书管理系统（带精解注释）舍友一把王者的时间，我完成了一个纯Java的基础入门小项目~
python PySide6 图书管理系统结合数据库实战教程之登录-注册界面（保姆级教程）（后续更新）
首先默认安装了mysql8.0.29,默认安装了python. 此项目用到了python的第三方库PySide6.pymysql.pyinstaller. 目录安装第三方库数据库建表 py文件注 ...
Vue实战篇一：使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
Java：图书管理系统
文章目录前言基本情况介绍主体思想&部分实现代码图书类书架类抽象出图书管理系统使用者的类子类:管理员子类:用户 Main类 Operation包 IOperation接口新增图 ...
web图书管理系统（HTML+CSS+JS+PHP）
看很多人都写了图书管理系统,所以自己也来试试前言本项目是一个基于PHP的图书管理系统,实现了登录.注册和基本的增删查改操作使用的技术是php,html,bootstrap,Mysql,小皮等前 ...
JAVAWEB（三）Java与数据库（JUnit、JUL、Maven、图书管理系统）
使用JUnit进行单元测试 !!!!!! 前排提醒:我们要将pom.xml中的junit版本改成4.12及以上的! !!!!!! 首先一问:我们为什么需要单元测试? 随着我们的项目逐渐变大,比如我们之 ...

图书管理系统之带验证码登录界面

图书管理系统之带验证码登录界面

学生成绩管理系统之带验证码登录界面

学生信息管理系统之带验证码登录界面

课程管理系统之带验证码登录界面

图书管理系统之带验证码登录界面相关推荐

最新文章

热门文章