如何用JavaScript编写实现自动锁屏功能的长尾？

本文共计920个文字，预计阅读时间需要4分钟。

1. 使用场景+需求：为防止用户离开桌面或一段时间不操作导致系统未关闭，开发了一套系统。当用户离桌或长时间不操作时，需将所有打开页面锁定，仅可通过输入密码验证后解锁。

1.使用场景

有这么一个需求，开发了一套系统，当用户离开桌面或者一段时间不操作的话，需要把该系统所有打开页面锁定起来，就跟桌面锁屏一样，只能输入密码验证成功后，或者重新登录，才可以继续操作页面，如果刷新页面，也要保持锁定。就像下图一样。当然用户也可以手动触发锁屏。目的是防止他人随意操作系统的重要内容。那么该如何去实现呢？

5s锁屏效果如下：

2.思路

1. 首先需要一个变量isLock表示页面是否锁定。由于多个页面需要共享这个数据，且刷新后依然能够获取到，所以我使用了localStorage储存在本地。isLock为true的时候就展示锁屏样式。
2. 设置一个定时器 setTimeout，比如代码中设置页面无操作n秒后锁屏，那么n秒后执行锁屏操作lockPro()，即var timer = setTimeout(lockPro, n)
3. 需要监测window的mousemove事件，监测用户鼠标移动动作，判断屏幕有没有被锁定，如果已经锁定，则不做任何操作，如果屏幕还没有锁定，需要设置一个变量moveTime记录每次鼠标移动时的时间，并保存到localStorage中，并且清除定时器timer，重新计时。
4. setInterval轮询监听isLock，每1s获取一次，以便及时拿到锁屏状态。