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数组方法
Jan 08 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
js实现分页功能
May 24 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
快速处理vue渲染前的显示问题
Mar 05 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
Element Cascader 级联选择器的使用示例
Jul 27 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学习笔记 类的声明与对象实例化
2011/06/13 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php生成随机数的三种方法
2014/09/10 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
node.js中的fs.rmdirSync方法使用说明
2014/12/16 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
Python字符串逐字符或逐词反转方法
2015/05/21 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
毕业研究生的自我鉴定
2013/11/30 职场文书
个人求职信范文分享
2014/01/06 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript