JavaScript实现鼠标无操作N秒后自动屏保
作者:木棉时间:2026-10-22 05:34:38浏览:375
本文介绍如何使用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实现鼠标无操作后自动屏保功能的方法,希望能对大家有所帮助。如有疑问欢迎留言,小编会及时回复。感谢大家对本站的支持!
作者最新文章
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
D3.js 新手入门:环境搭建与第一个条形图实现
2026-11-04 10:49:48
