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 相关文章推荐
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 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/11/20 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python定时器线程池原理详解
2020/02/26 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
精神文明单位申报材料
2014/05/02 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
新闻稿怎么写
2015/07/18 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS