手勢密碼繪製
阿新 • • 發佈：2018-12-03
本案例通過JQuery的jquery.gesture.password.js外掛來進行繪製。繪製效果如下：
程式碼如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="http://static.wanlianjin.com/data/m/wlcs/js/nocar/rem.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } body,html{ font-size: 0.36rem; font-family: "微軟雅黑"; text-align: center; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } #phoneNum{ font-size: 0.36rem; margin: .5rem 0 0 0; visibility: hidden; } #gesturepwd{width: 5.6rem;height: 5.6rem;margin: 0 auto;position: absolute;top: 3rem;left: .4rem;} .tishi{ color: #f26229; font-size: 0.3rem; } .pan{ width: 1.25rem; height: 1.25rem; padding: 1%; box-sizing: border-box; margin: 0 auto; } .pan div{ width: 20%; height: 20%; float: left; border-radius: 1000px; border: 1px solid #FFA200; box-sizing: border-box; margin: 6%; } .addBg{ background: #FFA200; } .mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); color: #fff; display: none; } #maskTime{ margin-top: 5rem; display: inline-block; } .normal{color: #666;} </style> </head> <body> <div id="phoneNum">180****1234</div> <!--小密碼框--> <div class="pan"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!--提示--> <div id="tishi" class="tishi normal">設定手勢密碼</div> <!--密碼繪製區域--> <div id="gesturepwd"></div> <!--遮罩--> <div class="mask"> <span id="maskTime"></span> </div> </body> <script src="js/jquery.gesture.password.js"></script> <script type="text/javascript"> //設定區域的尺寸 var w = $("#gesturepwd").width(); var h = $("#gesturepwd").height(); var rr = w/6*0.6; var pr = w/6*0.2; var jg = w/3*0.4; //密碼繪製區域樣式設定 $("#gesturepwd").GesturePasswd({ backgroundColor:"#ffffff", //背景色 color:"#ffa200", //主要的控制元件顏色 roundRadii:rr, //大圓點的半徑 pointRadii:pr, //大圓點被選中時顯示的圓心的半徑 space:jg, //大圓點之間的間隙 width:w, //整個元件的寬度 height:h, //整個元件的高度 lineColor:"#ffa200", //使用者劃出線條的顏色 zindex :100 //整個元件的css z-index屬性 }); var flag = 0; var isWd = localStorage.getItem('success') ? true : false; //記錄密碼是否設定成功的狀態 false表示未設定成功 var num = 5; //密碼設定成功之後，再次進來輸入的限制次數 var pwd = ""; //記錄密碼 var isbol = false; var pwd1='',pwd2=''; //記錄首次和接下來的密碼 var timer; if(isWd){ $("#tishi").text("請繪製手勢密碼").addClass('normal'); }else{ $("#tishi").text("首次登入，請設定手勢密碼").addClass('normal'); } if(localStorage.endTime){ timer = setInterval(function(){ShowCountDown('maskTime');}, 1000); $(".mask").show(); } $("#gesturepwd").on("hasPasswd",function(e,passwd){ //passwd記錄連線的結果 var result; pwd = passwd; if(pwd.length>1){ //根據下面的繪製渲染密碼小框 var arr=[]; arr = pwd.split(""); $(".pan div").removeClass('addBg'); for(var i=0;i<arr.length;i++){ $(".pan div").eq(arr[i]-1).addClass('addBg'); } if(isWd){ pwd1 = localStorage.getItem('pwd') if(passwd == pwd1){ result=true; }else { result=false; } if(result == true){ $("#gesturepwd").trigger("passwdRight"); setTimeout(function(){ //密碼驗證正確後的其他操作，開啟新的頁面等。。。 alert("密碼正確！") },500); //延遲半秒以照顧視覺效果 }else{ num--; $("#gesturepwd").trigger("passwdWrong"); //密碼驗證錯誤後的其他操作。。。 $("#tishi").text("密碼輸入錯誤，您還可以輸入"+num+"次").removeClass('normal'); if(num==0){ $("#tishi").text("繪製手勢密碼").addClass('normal'); $(".mask").show(); var endTime = (new Date()).getTime()+3600000; localStorage.endTime = endTime; timer = setInterval(function(){ShowCountDown('maskTime');}, 1000); } } }else{ if(passwd.length<4){ $("#gesturepwd").trigger("passwdAgain"); $("#tishi").text("請連線至少四個點").removeClass('normal'); }else{ if(pwd1==''){ //如果是第一次輸入，存下結果 pwd1 = pwd; $("#tishi").text("請再次輸入"); }else{ //如果不是第一次輸入，存下結果 pwd2 = pwd; if(pwd1 == pwd2){ //兩次密碼輸入一致跳轉頁面 $("#tishi").text("設定密碼成功").addClass('normal'); $(".pan div").removeClass('addBg'); isWd = true; localStorage.setItem('success',isWd); localStorage.setItem('pwd',pwd2); window.location.href="index.html" }else{ $("#tishi").text("兩次輸入不一，請重新輸入").removeClass('normal'); pwd1=''; pwd2=''; } } //清除以前繪製的密碼痕跡 $("#gesturepwd").trigger("passwdAgain"); } } }else{ //繪製長度不足兩個則自動清除 $("#gesturepwd").trigger("passwdWrong"); } }); $('body').bind('touchstart',function(e){ //取消預設事件 e.preventDefault() }) //密碼設定成功之後，輸入密碼超過五次，則在接下來的一小時之內禁止輸入，一小時之後可繼續再輸五次 function ShowCountDown(divname) { var now = new Date(); var endDate = localStorage.endTime; var leftTime=endDate-now.getTime(); var leftsecond = parseInt(leftTime/1000); var day1=Math.floor(leftsecond/(60*60*24)); var hour=Math.floor((leftsecond-day1*24*60*60)/3600); var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60); var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60); var cc = document.getElementById(divname); cc.innerHTML = minute+"："+second; if(minute<10 && second>=10){ cc.innerHTML = "0"+minute+"："+second; } if(minute>=10 && second<10){ cc.innerHTML = minute+"：0"+second; } if(minute<10 && second<10){ cc.innerHTML = "0"+minute+"：0"+second; } console.log(leftsecond); if(leftsecond <= 0){ window.clearInterval(timer); $(".mask").hide(); localStorage.removeItem("endTime"); num = 5; } } </script> </html>