亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

巧用patternLock開(kāi)發(fā)圖案滑屏解鎖

Atom / 1113人閱讀

摘要：此外，本例還使用到了相關(guān)文件。制作個(gè)性化的九宮格圖本圖將品牌字母融入其中，同時(shí)包含了網(wǎng)站三大特色業(yè)務(wù)借換購(gòu)。此外，還有個(gè)問(wèn)題。

作者的話： 
基于patternLock插件實(shí)現(xiàn)九宮格登陸校驗(yàn)功能。其亮點(diǎn)在于摒棄傳統(tǒng)校驗(yàn)方式同時(shí)融合產(chǎn)品文化。同上一篇文章一樣，本次實(shí)現(xiàn)功能剝離至本人15年畢設(shè)項(xiàng)目《ReBook》。下面介紹主要思路，詳情請(qǐng)戳后面源碼鏈接。
效果圖：

左側(cè)：九宮格滑動(dòng)區(qū)域，右側(cè)：登陸、提示區(qū)域

根據(jù)提示點(diǎn)擊滑動(dòng)，依次連接“借書(shū)圖標(biāo)”-“換書(shū)圖標(biāo)”-“購(gòu)書(shū)圖標(biāo)”（以下簡(jiǎn)稱“借換購(gòu)”）即得結(jié)果：

開(kāi)發(fā)步驟：

1. 引入相關(guān)插件文件：

主要有patternLock.js/patternLock.css。此外，本例還使用到了bootstrap、jquery相關(guān)文件。

2. 制作個(gè)性化的九宮格圖：

本圖將品牌REBOOK字母融入其中，同時(shí)包含了網(wǎng)站三大特色業(yè)務(wù)LOGO（借換購(gòu)）。在此我只做了一張大圖，在css中使用background-position定位。當(dāng)然你也可以分解成9張小圖來(lái)實(shí)現(xiàn)。

3. 實(shí)現(xiàn)登陸窗口

form表單input實(shí)現(xiàn)之類的大家都會(huì)，只是美與丑的差別，此處省略。

4. 解鎖原理

同傳統(tǒng)隨機(jī)數(shù)字校驗(yàn)方式相同，我們?cè)诳吹脚で?、模糊等花樣作死的?shù)字（或字母、文字）后，鈦合金雙眼識(shí)別成功后輸入對(duì)應(yīng)數(shù)字即校驗(yàn)成功。
同理，我們將patternLock九宮格的九個(gè)區(qū)域類比成1-9這九個(gè)數(shù)字，當(dāng)你依次點(diǎn)擊滑動(dòng)連接1-5-9對(duì)應(yīng)區(qū)域，則意味著得到的匹配字串即為“159”，再將其與隨機(jī)生成的標(biāo)準(zhǔn)答案字串對(duì)比即得結(jié)果。
                                1 2 3
                                4 5 6
                                7 8 9
對(duì)應(yīng)的代碼如下：
// 正確答案串
var rightAnswer = "";
// 初始化九宮格
var lock = new PatternLock("#patternContainer");
lock.checkForPattern(rightAnswer,function(){
// 校驗(yàn)成功，激活登陸按鈕
    $("#login").attr("disabled",false);
    $("#login").removeClass("buttonDis");
    //alert("驗(yàn)證成功");
},function(){
    lert("連錯(cuò)了，再試一次");
   lock.reset();
}); 
此時(shí)，我們描繪的只是一個(gè)裸著的patternLock，那待我們給九個(gè)娃娃穿上漂亮的CSS圖標(biāo)之后是不是就大功告成了呢？

5. 前方高能

我們?cè)O(shè)想一次驗(yàn)證過(guò)程，假如本次后臺(tái)生成的標(biāo)準(zhǔn)字串值為“589”。那么，我們需要給“5”娃穿上“借書(shū)圖標(biāo)”、“8”娃穿上“換書(shū)圖標(biāo)”、“9”娃穿上“購(gòu)書(shū)圖標(biāo)”，其他娃娃們就隨便穿了。因?yàn)閷?duì)于用戶們來(lái)說(shuō)，不論后臺(tái)生成的標(biāo)答是什么，他們的標(biāo)答永遠(yuǎn)都是依次連接“借換購(gòu)”就能驗(yàn)證成功。所以我們，在九宮格區(qū)域映射對(duì)應(yīng)樣式過(guò)程需要?jiǎng)澐殖蓛刹糠?，一部分專屬?biāo)答隨機(jī)映射，一部分剩余部分的隨意映射，實(shí)現(xiàn)每次用戶進(jìn)入看到的展示效果不同。
此外，還有個(gè)問(wèn)題。如果真的太隨機(jī)了對(duì)于用戶在電腦上連接確實(shí)會(huì)有一定的難度，用戶體驗(yàn)下降。于是本例做了小小的限制，將標(biāo)答的產(chǎn)生范圍從3X3縮小到了2X2（即5689對(duì)于區(qū)域）。

6.Demo源碼

附錄：

patternLock官網(wǎng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111274.html

相關(guān)文章

  • 巧用patternLock開(kāi)發(fā)圖案滑屏解鎖

    摘要：此外，本例還使用到了相關(guān)文件。制作個(gè)性化的九宮格圖本圖將品牌字母融入其中，同時(shí)包含了網(wǎng)站三大特色業(yè)務(wù)借換購(gòu)。此外，還有個(gè)問(wèn)題。 作者的話： 基于patternLock插件實(shí)現(xiàn)九宮格登陸校驗(yàn)功能。其亮點(diǎn)在于摒棄傳統(tǒng)校驗(yàn)方式同時(shí)融合產(chǎn)品文化。同上一篇文章一樣，本次實(shí)現(xiàn)功能剝離至本人15年畢設(shè)項(xiàng)目《ReBook》。下面介紹主要思路，詳情請(qǐng)戳后面源碼鏈接。 效果圖： 左側(cè)：九宮格滑動(dòng)區(qū)域，右側(cè)...

    enrecul101 評(píng)論0 收藏0

  • JavaScript新鮮事·第5期

    摘要：官網(wǎng)一個(gè)處理的庫(kù)，可以在與之間互相轉(zhuǎn)換，還可以使用處理大文件。官網(wǎng)類似系統(tǒng)圖案解鎖的東西。原文地址發(fā)布發(fā)布了版本，是一套遵循規(guī)范的框架，目前支持，而支持的仍在階段。 ShiftJS showImg(https://segmentfault.com/img/bVCf71); 一個(gè)Swift轉(zhuǎn)JavaScript的編譯器。官網(wǎng)：http://www.shiftjs.com toolgif ...

    TesterHome 評(píng)論0 收藏0

  • 滑屏組件----slide

    摘要：滑屏組件自定義滑屏組件，可定制滑屏動(dòng)畫(huà)可控制每屏動(dòng)畫(huà)效果訪問(wèn)滑屏組件必填傳入滑動(dòng)容器選填滑動(dòng)時(shí)切換動(dòng)畫(huà)，默認(rèn)選填記錄當(dāng)前瀏覽頁(yè)面選填切換完成回調(diào)選填下滑完成時(shí)回調(diào)選填上滑完成時(shí)回調(diào)選填滑動(dòng)過(guò)程動(dòng)畫(huà)效果必填，傳入滑動(dòng)容器選填，滑動(dòng)時(shí)切換動(dòng) slide 滑屏組件 自定義滑屏組件，可定制滑屏動(dòng)畫(huà) 可控制每屏動(dòng)畫(huà)效果 Install git clone https://github.com...

    Me_Kun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<