登陸介面驗證碼
阿新 • • 發佈：2019-02-02
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <style type="text/css"> *{ margin:0; padding: 0; box-sizing: border-box; } html{ width: 100%; height: 100%; font-size: 16px; } body{ width: 100%; height: 100%; -moz-user-select: none; /*火狐*/ /*禁止使用者在頁面選擇文字*/ -webkit-user-select: none; /*webkit瀏覽器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期瀏覽器*/ user-select: none; } .input-val{ width: 195px; background: #ffffff; height: 2.8rem; padding: 0 2%; border-radius: 5px; border: none; border: 1px solid rgba(0,0,0,.2); font-size: 1.0625rem; } #canvas{ float:right; display: inline-block; border:1px solid #ccc; border-radius: 5px; cursor: pointer; } </style> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>創 | Login</title> <link rel="icon" type="image/x-icon" th:href="@{/static/img/logo_icon.png}"/> <link th:href="@{/static/inspiniaAdmin/css/bootstrap.css}" rel="stylesheet" /> <link th:href="@{/static/inspiniaAdmin/font-awesome/css/font-awesome.css}" rel="stylesheet" /> <link th:href="@{/static/inspiniaAdmin/css/animate.css}" rel="stylesheet" /> <link th:href="@{/static/inspiniaAdmin/css/style.css}" rel="stylesheet" /> </head><!-- <script type="text/javascript" src="GVerify.js"></script>--> <body class="gray-bg" style="background:white" onload="createCode()"> <div> <div class="text-center loginscreen fadeInDown"> <div style="margin-top: 15em"> <img src="../static/img/logo.png" width="150px" height="150px"/> </div> <div> <h1 style="font-size: 35px;font-weight: 600; color:#AB4950;margin-bottom: 50px;margin-top:50px">博物館後臺管理系統</h1> </div> </div> <div class="middle-box text-center loginscreen animated fadeInDown" style="margin-top: -5em"> <form class="m-t" th:action="@{/login}" id = "form" method="post"> <div class="form-group" > <input type="number" class="form-control" id = "username" name="username" required="" placeholder="請輸入使用者名稱稱"/> </div> <div class="form-group"> <input type="password" class="form-control" id = "password" name="password" required="" placeholder="請輸入登入密碼"/> </div> <div class="form-group"> <input type="text" value="" placeholder="請輸入驗證碼（不區分大小寫）" class="input-val" /> <canvas id="canvas" width="100" height="43"></canvas> </div> <button type="submit" id="btn-submit" class="btn btn-primary block full-width m-b" style="background:#AB4950;border-color:white;height: 50px;border-radius:5px;font-size: 24px" onclick = "validate()">登入</button> <a href="#"><small>忘記密碼?</small></a> </form> </div> </div> <!-- Mainly scripts --> <script th:src="@{/static/inspiniaAdmin/js/jquery-3.1.1.min.js}"></script> <script th:src="@{/static/inspiniaAdmin/js/bootstrap.min.js}"></script> <script th:src="@{/static/js/components/top.js}"></script> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script> $(function(){ var show_num = []; draw(show_num); $("#canvas").on('click',function(){ draw(show_num); }) $(".btn-submit").on('click',function(){ var val = $(".input-val").val().toLowerCase(); var num = show_num.join(""); if(val==''){ alert('請輸入驗證碼！'); }else if(val == num){ alert('提交成功！'); $(".input-val").val(''); draw(show_num); }else{ alert('驗證碼錯誤！請重新輸入！'); $(".input-val").val(''); draw(show_num); } }) }) function draw(show_num) { var canvas_width=$('#canvas').width(); var canvas_height=$('#canvas').height(); 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"; 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.toLowerCase(); 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>