获取焦点时,利用js定时器设定时间执行动作


Posted in Javascript onApril 02, 2010

进入正题,先说说定时器。
在javascritp中,有两个关于定时器的专用函数,分别为:
1.倒计定时器:timename=setTimeout("function();",delaytime);
2.循环定时器:timename=setInterval("function();",delaytime);
第一个参数“function()”是定时器触发时要执行的动作,可以是一个函数,也可以是几个函数,函数间用“;”隔开即可。比如要弹出两个警告窗口,便可将“function();”换成
“alert('第一个警告窗口!');alert('第二个警告窗口!');”;而第二个参数“delaytime”则是间隔的时间,以毫秒为单位,即填写“5000”,就表示5秒钟。

倒计时定时器是在指定时间到达后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,两者的区别在于:前者只是作用一次,而后者则不停地作用。
比如你打开一个页面后,想间隔几秒自动跳转到另一个页面,则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ,而如果想将某一句话设置成一个一个字的出现,
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点,则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如:if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

一下略举两例。
例1.表单触发或加载时,逐字输出字符串

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script language="JavaScript" type="text/javascript"> 
var str = "这个是测试用的范例文字"; 
var seq = 0; 
var second=1000; //间隔时间1秒钟 
function scroll() { 
msg = str.substring(0, seq+1); 
document.getElementById('word').innerHTML = msg; 
seq++; 
if (seq >= str.length) seq = 0; 
} 
</script> 
</head> 
<body onload="setInterval('scroll()',second)"> 
<div id="word"></div><br/><br/> 
</body> 
</html>

例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script language="JavaScript" type="text/javascript"> 
var second=5000; //间隔时间5秒钟 
var c=0; 
function scroll() { 
c++; 
if ("b" == document.activeElement.id) { 
var str="定时检查第<b> "+c+" </b>次<br/>"; 
if(document.getElementById('b').value!=""){ 
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementById('b').value+"</b>"; 
} 
document.getElementById('word').innerHTML = str; 
} 
} 
</script> 
</head> 
<body> 
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/> 
<div id="word"></div><br/><br/> 
</body> 
</html>

例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<script language="javascript"> 
function count() { 
document.getElementById('m').innerHTML="计时已经开始!"; 
setTimeout("alert('十秒钟到!')",10000) 
} 
</script> 
<body> 
<div id="m"></div> 
<input TYPE="button" value=" 计时开始" onclick="count()"> 
</body> 
</html>
Javascript 相关文章推荐
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JQuery中DOM加载与事件执行实例分析
Jun 13 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
详解React中setState回调函数
Jun 14 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
Javascript 类与静态类的实现(续)
Apr 02 #Javascript
用js实现计算加载页面所用的时间
Apr 02 #Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 #Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 #Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 #Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 #Javascript
js 刷新页面的代码小结 推荐
Apr 02 #Javascript
You might like
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
python实现网站的模拟登录
2016/01/04 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
教师党员承诺书
2014/03/25 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
初中信息技术教学反思
2016/02/16 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python