fcode.js 自动锁屏插件
https://t1.picb.cc/uploads/2018/03/31/2iZQfs.png https://t1.picb.cc/uploads/2018/03/31/2iZ3Ue.jpg
https://gitee.com/lovefc/fcode#fcodejs是什么 fcode.js 是什么?
fcode.js 是一款 web 页面九宫格自动锁屏 js 插件, 依赖于 jquery,
会在设置的范围里, 判断用户有无操作, 然后执行锁屏的功能
就一个 js 文件, 配置简单, 操作方便, 可以锁住任何页面, 还支持在手机端的锁屏
此外, 还支持更新密码, 或者用来登录, 都有相关的说明, 特别简单, 相信您看一下, 就会明白!
演示地址: http://fcphp.cn/fcode demo 请在 http 方式下访问
码云地址: https://gitee.com/lovefc/fcode
GITHUB : https://github.com/lovefc/fcode
- <script src="js/jquery.min.js"></script>
- <script src="js/fcode.min.js"></script>
- <script type="text/javascript">
- fcode.Start(123);
- </script>
因为是使用的九宫格, 所以密码就是对应着数字 123456789, 最上面一排从左到右代表 1,2,3, 中间代表 4,5,6, 最后一排代表 7,8,9 所以相应的密码也要如此设置
https://gitee.com/lovefc/fcode#fcode的基本配置 fcode 的基本配置
fcode.js 的基本配置非常简单, 一看便知, 便不多做介绍
- <script type="text/javascript">
- fcode.bgColor = '#FFF'; // 背景颜色
- fcode.fontColor = '#666'; // 圆环颜色
- fcode.lineColor = "#333"; // 连线的颜色
- fcode.lineErrorColor = "#00a254"; // 连线错误颜色
- fcode.lineSuceessColor = "#cc1c21"; // 连续正确颜色
- fcode.Time = 10; // 锁屏的时间, 单位 s
- fcode.bgImage = 'images/time.jpg'; // 设置背景图片, 优先于背景颜色
- fcode.customhtml = 'lovefc'; // 定义九宫格解锁上方的 html 内容
- fcode.Start('123'); // 启动运行
- </script>
这里重点介绍一下 fcode.Start 这个函数的设置, 这个函数是启动功能的, 参数可以是密码, md5 加密的密码, 或者是一个 api 接口
1. 普通密码形式
fcode.Start('123');// 启动运行
这种方式, 就是代表第一排滑动解锁, 简单方便, 缺点是能看到源码 (虽然我已经屏蔽了源码查看, f12, 右键查看的功能)
2.md5 加密形式, 其实就是把上面的 123md5 加密一下, 是小写的 md5 32 位加密方式, 可以随便找个工具加密一下就行了, 比如用这个, http://tool.chinaz.com/tools/md5.aspx 这种方式安全多了, 而且可以免去配置 api 接口, 不需要额外的脚本就能运行
fcode.Start('202cb962ac59075b964b07152d234b70');// 启动运行
3. 第三种方式就是 api 接口形式的了, 目前只提供了 php 的接口参考 (本人做 php 的), 地址一定要填写完整的接口地址, 例如 http://127.0.0.1/status.php
fcode.Start('http://127.0.0.1/status.php');
接口设计也是非常简单, 没有什么复杂的地方, 一看便知
- <?php
- /*
- * 用来验证锁屏密码
- * author:lovefc
- */
- $pwd = isset($_POST['pwd']) ? $_POST['pwd']:null;// 获取传过来的密码
- $time = isset($_POST['time']) ? (int) $_POST['time'] : 60;// 获取传过来的时间
- if(!empty($pwd)){ // 比对密码, 看看是否相等
- if($pwd==1235789){ // 设置 cookies, 加上时间
- setcookie("fcode_status",'lovefc', time()+$time); // 返会并输出 ok
- die('ok');
- }
- }
4. 兼容性说明, 测试支持 ie10,ie11, 火狐, 谷歌!
ps: 本人原创的一款 jquery 插件!
来源: https://www.cnblogs.com/lovefc/p/fcode.html