JavaScript无操作后屏保功能的实现方法


Posted in Javascript onJuly 04, 2017

今天组里的同事要写一个屏保的效果,要求鼠标无操作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无操作后屏保功能的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 #Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 #Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 #Javascript
原生js实现简单的链式操作
Jul 04 #Javascript
详解用vue编写弹出框组件
Jul 04 #Javascript
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
详解rem 适配布局
2018/10/31 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
公司委托书格式范本
2014/09/16 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
关于迟到的检讨书
2015/05/06 职场文书
紧急迫降观后感
2015/06/15 职场文书
交通事故责任认定书
2015/08/06 职场文书
学习心得体会
2019/06/20 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
Java如何实现树的同构?
2021/06/22 Java/Android