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>