fcode是一款手势密码设置及解锁的jquery插件-BFW插件库

fcode是一款手势密码设置及解锁的jquery插件

使用方式：

第一步引入bfwone 加载依赖项jquery

<script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

第二步use插件

use(["fcode"], function() {

});

第三步配置参数

fcode.bgColor = '#a1afc9'; //背景颜色
fcode.fontColor = '#FFF'; //圆环颜色
fcode.lineColor = "#FFF"; //连线的颜色
fcode.lineErrorColor = "#00a254";//连线错误颜色
fcode.lineSuceessColor = "#cc1c21";//连线正确颜色
fcode.Time = 10; //锁屏的时间,单位s
fcode.bgImage = '//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png'; //设置背景图片，优先于背景颜色
//定义九宫格解锁上方的html内容
 fcode.customHtml = '<div style="margin-top:80px;"><img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" style="width:70px;height:70px;border-radius:100px"><br /><br /></div>';

方法：

fcode.hide() //隐藏手势界面
fcode.show() //显示手势界面
fcode.succes() //设置成功提示
fcode.error() //隐藏错误失败提示
fcode.Login(callback)  //手势验证回调，会返回手势密码
fcode.Setpwd(callback)  //新手势验证设置，会返回新手势密码

示例代码如下

设置手势密码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["fcode"], function() {
                fcode.bgColor = '#a1afc9'; //背景颜色

                fcode.fontColor = '#FFF'; //圆环颜色

                fcode.lineColor = "#FFF"; //连线的颜色

                //fcode.lineErrorColor = "#00a254";//连线错误颜色

                //fcode.lineSuceessColor = "#cc1c21";//连线正确颜色

                fcode.Time = 10; //锁屏的时间,单位s

                fcode.bgImage = '//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png'; //设置背景图片，优先于背景颜色

                //定义九宫格解锁上方的html内容
                fcode.customHtml = '<div style="margin-top:80px;"><img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" style="width:70px;height:70px;border-radius:100px"><br /><br /></div>';



                //设置密码
                fcode.Setpwd(function(pwd) {
                    console.log(pwd);
                    //ajax交给后端保存



                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>


</body>
</html>

登录验证手势

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["fcode"], function() {
                fcode.bgColor = '#a1afc9'; //背景颜色

                fcode.fontColor = '#FFF'; //圆环颜色

                fcode.lineColor = "#FFF"; //连线的颜色

                //fcode.lineErrorColor = "#00a254";//连线错误颜色

                //fcode.lineSuceessColor = "#cc1c21";//连线正确颜色

                fcode.Time = 10; //锁屏的时间,单位s

                fcode.bgImage = '//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png'; //设置背景图片，优先于背景颜色

                //定义九宫格解锁上方的html内容
                fcode.customHtml = '<div style="margin-top:80px;"><img src="//repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" style="width:70px;height:70px;border-radius:100px"><br /><br /></div>';


                // fcode.Start('123');
                fcode.Login(function(pwd2) {
                    console.log(pwd2);
                    //上面一条横线
                    if (pwd2 == "123") {
                        //交给后端验证
                        fcode.succes();
                        fcode.hide();
                    } else {
                        fcode.error();
                    }

                });
            });
        });
    </script>
    <style>
    </style>
</head>
<body>
    <!-- //这是解锁后的界面， -->
    <img src="https://img.bfw.wiki/uploadimg/20200130/5e323a4646d13.png" />

</body>
</html>

fcode是一款手势密码设置及解锁的jquery插件

网友评论0

gridly.js

jquery-resizable.js

drag.js

draggabilly.js

impetus.min.js

jquery.dad.min.js

subjx.js

interact.min.js

subj.js

moveable.min.js