解锁屏幕 





 1 !-- 屏幕锁屏 -->
 2 <div class="lock-screen" style="display: none;">
 3    <div class="lock-wrapper" id="lock-screen">
 4         <div id="time"></div>
 5         <div class="lock-box">
 6              <img src="images/user.jpg" alt="">
 7              <h1>admin</h1>
 8              <form action="" class="layui-form lock-form">
 9                   <div class="layui-form-item">
10                        <input type="password" id="unlock_pass" name="lock_password" lay-verify="pass" placeholder="锁屏状态，请输入密码解锁" autocomplete="off" class="layui-input"  autofocus="">
11                   </div>
12                   <div class="layui-form-item">
13                        <span class="layui-btn larry-btn" id="unlock">立即解锁</span>
14                   </div>
15              </form>
16         </div>
17    </div>






 


 1 <!--锁屏-->
 2 <script>
 3     $('#lock').mouseover(function(){
 4         layer.tips('请按alt+l快速锁屏','#lock',{
 5             tips: [1, '#FF5722'],
 6             time: 1500
 7         })
 8     })
 9     var locked=0;
10     function lockSystem(){
11         var url='datas/lock.json';
12         locked=1;
13         $.post(
14             url,
15             function(data){
16                 if(data.lock){
17                     checkLockStatus(locked);
18                 }else{
19                     layer.alert('锁屏失败，请稍后再试');
20                 }
21             });
22         setTimer();
23     }
24     // 解屏
25     function unlockSys(){
26         if($('#unlock_pass').val() == 'larrycms'){
27             locked = 0;
28             checkLockStatus(locked);
29             return;
30         }else{
31             layer.tips('模拟锁屏，输入密码：larrycms 解锁', $('#unlock'), {
32                 tips: [3, '#FF5722'],
33                 time:1000
34             });
35             return;
36         }
37     }
38 
39     // 检测锁屏状态
40     function checkLockStatus(locked){
41         if(locked=1){//锁屏
42             $('.lock-screen').show();
43             $('#locker').show();
44             $('#lock_password').val('');
45         }else{
46             $('.lock-screen').hide();
47             $('#locker').hide();
48             $('#larry_admin_out').show();
49         }
50     }
51     // 点击锁屏
52     $('#lock').click(function(){
53         lockSystem();
54     })
55     // 解锁进入系统
56     $('#unlock').click(function () {
57         unlockSys();
58     })
59 </script>




 







            

            
posted @ 
2018-04-26 09:18 
前端极客 
阅读(1106) 
评论(0) 
编辑 
收藏 
举报