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 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
js实现小时钟效果
Mar 25 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模板引擎SMARTY
2006/10/09 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
js树形控件脚本代码
2008/07/24 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
平面设计师工作职责范文
2013/12/03 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
宣传委员竞选稿
2015/11/19 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python