获取焦点时,利用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 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 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动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
一个javascript参数的小问题
2008/03/02 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
Python中的字符串类型基本知识学习教程
2016/02/04 Python
django缓存配置的几种方法详解
2018/07/16 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python 构造三维全零数组的方法
2018/11/12 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python创建或生成列表的操作方法
2019/06/19 Python
Django 静态文件配置过程详解
2019/07/23 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
岗位廉洁从业承诺书
2014/03/28 职场文书
北京奥运会口号
2014/06/21 职场文书
业务员辞职信范文
2015/03/02 职场文书
年度考核个人总结
2015/03/06 职场文书
实习单位鉴定意见
2015/06/04 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
keepalived + nginx 实现高可用方案
2022/12/24 Servers