获取焦点时,利用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 相关文章推荐
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
vue.js todolist实现代码
Oct 29 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
vue 扩展现有组件的操作
Aug 14 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读取和编写XML DOM的实现代码
2011/02/03 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js 异步处理进度条
2010/04/01 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
小试小程序云开发(小结)
2019/06/06 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python图算法实例分析
2016/08/13 Python
python进行两个表格对比的方法
2018/06/27 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
最新大学生自我评价
2013/09/24 职场文书
大学生文员专业个人求职信范文
2014/01/05 职场文书
学校三节实施方案
2014/06/09 职场文书
安全口号大全
2014/06/21 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
了解Redis常见应用场景
2021/06/23 Redis
Python中re模块的元字符使用小结
2022/04/07 Python