JavaScript实现鼠标无操作N秒后自动屏保

作者:木棉

时间:2026-10-22

浏览:374

本文介绍如何使用JavaScript实现鼠标无操作N秒后自动进入屏幕保护状态的功能。通过监听鼠标移动事件重置定时器,当鼠标静止超过指定时间后执行屏保逻辑,适用于网页端屏保效果开发。

文章目录

JavaScript实现鼠标无操作N秒后自动屏保

近期团队需要实现一个网页屏保效果,要求当鼠标在N秒内无操作时自动触发屏保,而鼠标滑动时则取消屏保。针对网页环境,这里使用JavaScript进行了简单实现,具体代码如下:


<html>
<head>
 <title>屏幕保护测试</title>
 <script type="text/javascript">
 var message ;//获取p标签
 var t=setTimeout("delayTask()",3000);//延时3秒执行延时任务
 //延时任务具体的操作
 function delayTask(){
  //延时后,在标签中显示时间
  message.innerText= new Date();//此行替换为你要做的显示操作
  clearTimeout(t);
 }
 //鼠标移动,重置延时任务
 function resetTask(){
  //重置标签中的内容
  message.innerText = "";//此行替换为你要做的取消操作
  clearTimeout(t);
  t=setTimeout("delayTask()",3000);
 }
 //页面加载时,加载函数。
 function loading(){
  message = document.getElementById("message");
  document.onmousemove = resetTask;
 }
 window.onload = loading;
 </script>
</head>
<body>
 <p>3秒无操作后显示时间:</p>
 <p id="message"></p>
</body>
</html>

以上就是利用JavaScript实现鼠标无操作后自动屏保功能的方法,希望能对大家有所帮助。如有疑问欢迎留言,小编会及时回复。感谢大家对本站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章