获取焦点时,利用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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
网上应用的一个不错common.js脚本
Aug 08 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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
生成缩略图
2006/10/09 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
五十岁生日宴会答谢词
2014/01/15 职场文书
企业标语大全
2014/07/01 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
大学生团日活动总结
2015/05/06 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
详解python的内存分配机制
2021/05/10 Python
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript