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>