获取焦点时,利用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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
VsCode里的Vue模板的实现
Aug 12 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
上海无线电三厂简史修改版
2021/03/01 无线电
php 各种应用乱码问题的解决方法
2010/05/09 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
js脚本实现数据去重
2014/11/27 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python编写爬虫小程序
2015/05/14 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python实现单链表的方法示例
2019/09/03 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
财务助理岗位职责
2013/11/10 职场文书
工厂厂长的职责
2013/12/12 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2015年妇女工作总结
2015/05/14 职场文书
七年级语文教学反思
2016/03/03 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL