获取焦点时,利用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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
js实现html滑动图片拼图验证
Jun 24 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 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/03 咖啡文化
第十一节 重载 [11]
2006/10/09 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
javascript 常用功能总结
2012/03/18 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python os模块介绍
2014/11/30 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
python制作简单五子棋游戏
2019/06/18 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
财务总监岗位职责
2015/02/03 职场文书
2015年教育实习工作总结
2015/04/24 职场文书