获取焦点时,利用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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
DWR Ext 加载数据
Mar 22 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
基于Vue生产环境部署详解
2017/09/15 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
Python简单日志处理类分享
2015/02/14 Python
常见的python正则用法实例讲解
2016/06/21 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
基于python实现高速视频传输程序
2019/05/05 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
自荐信的五个重要部分
2013/10/29 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
听证通知书
2015/04/24 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
2015初中团委工作总结
2015/07/28 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers