获取焦点时,利用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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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/01/19 PHP
ext实现完整的登录代码
2008/08/08 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
20行python代码实现人脸识别
2019/05/05 Python
简述 Python 的类和对象
2020/08/21 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
教堂婚礼主持词
2014/03/14 职场文书
五一口号
2014/06/19 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers