九宫格自动锁屏 jQuery 插件 fcode.js

Apache
JavaScript
跨平台
2018-04-09
love封尘

fcode.js 自动锁屏插件

fcode-indexfcode

fcode.js是什么?

fcode.js是一款web页面九宫格自动锁屏js插件,依赖于jquery,

会在设置的范围里,判断用户有无操作,然后执行锁屏的功能。

就一个js文件,配置简单,操作方便,可以锁住任何页面,还支持在手机端的锁屏。

此外,还支持更新密码,或者用来登录,都有相关的说明,特别简单,相信您看一下,就会明白!

演示地址:http://fcphp.cn/fcode   demo请在http方式下访问

如何使用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 所以相应的密码也要如此设置

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,火狐,谷歌!

作者吐槽

不足之处 欢迎反馈

QQ:1102952084

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

【书单】JS书单汇总:怀念2013

  从2011年11月到现在,大抵接近两年的时间。对JS的了解,不敢说有多深,不过大都得益于下列书籍。大部分看过,小部分只是翻翻。2014年打算把这些书挑一些出来回顾回顾,然后研究下新的东西...

2014/01/24 00:37
467
2
《深入理解JavaScript系列》

《深入理解JavaScript系列》系列技术文章整理收藏

2015/06/23 15:08
58
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

2012/04/06 11:37
3.3K
7
解决一个html 或jsp 引入多个不同版本的jquery 解决方案

解决一个html 或jsp 引入多个不同版本的jquery 解决方案

2017/11/02 12:25
71
0
分享一些前端开发中最常用的JS代码片段

逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~ HTML5 DOM 选择器 javascript 代码 JavaScript运行复制全屏 1 // querySelector() 返回匹配到的第一个元素 2 var ...

02/27 21:21
46
0
Impatient JavaScript 中文版校对活动期待大家的参与

贡献指南:https://github.com/apachecn/impatient-js-zh/blob/master/CONTRIBUTING.md 整体进度:https://github.com/apachecn/impatient-js-zh/issues/1 项目仓库:https://github.com/ap...

06/17 10:32
5
0
a标签中调用javascript方法的几种方法:

我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的...

2013/12/01 00:20
64
0
asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结

通常javascript代码可以与HTML标签一起直接放在前端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿;所以一般有良好开发习惯的程序员都会...

2012/11/04 21:28
956
0
JavaScript八张思维导图

目录 JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践 不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vue,React等前端...

04/19 12:54
58
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部