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 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
React组件中的this的具体使用
Feb 28 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
tweenjs缓动算法的使用实例分析
Aug 26 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
使用PHP维护文件系统
2006/10/09 PHP
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
javascript常用方法总结
2015/05/14 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
javascript 中的console.log和弹出窗口alert
2016/08/30 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
js正则表达式简单校验方法
2021/01/03 Javascript
pytorch构建网络模型的4种方法
2018/04/13 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
详解python持久化文件读写
2019/04/06 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
thinkphp5 路由分发原理
2021/03/18 PHP
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
毕业生找工作的求职信范文
2013/12/24 职场文书
小学毕业家长寄语
2014/01/19 职场文书
北体毕业生求职信
2014/02/28 职场文书
三八节标语
2014/06/27 职场文书
毕业论文致谢信
2015/05/14 职场文书
杨善洲观后感
2015/06/04 职场文书
高中数学教学反思范文
2016/02/18 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL