获取焦点时,利用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 相关文章推荐
extjs中grid中嵌入动态combobox的应用
Jan 01 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 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
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Python Deque 模块使用详解
2014/07/04 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python自动识别文本编码格式代码
2019/12/26 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
门卫工作岗位职责
2013/12/17 职场文书
海南地接欢迎词
2014/01/14 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
债务纠纷起诉书
2015/05/20 职场文书
企业法律事务工作总结
2015/08/11 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript