yangguoe

 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>

 

分类:

技术点:

相关文章: