1. 程式人生 > >fcode-頁面九宮格自動鎖屏jquery插件

fcode-頁面九宮格自動鎖屏jquery插件

china href 連續 art 支持 http 函數 背景圖片 pic

fcode.js 自動鎖屏插件

技術分享圖片技術分享圖片

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

如何使用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,火狐,谷歌!

ps:本人原創的一款jquery插件!

fcode-頁面九宮格自動鎖屏jquery插件