获取焦点时,利用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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
openlayers实现图标拖动获取坐标
Sep 25 Javascript
element tree树形组件回显数据问题解决
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 二维array转换json的实例讲解
2018/08/21 PHP
JavaScript延迟加载
2021/03/09 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
javascript 写类方式之三
2009/07/05 Javascript
javascript获得CheckBoxList选中的数量
2009/10/27 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
微信小程序wepy框架笔记小结
2018/08/08 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
Python descriptor(描述符)的实现
2020/11/15 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
什么是类的返射机制
2016/02/06 面试题
企业军训感想
2014/02/07 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
2014年中秋寄语
2014/08/11 职场文书
公司年底活动方案
2014/08/17 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python