获取焦点时,利用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 26 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JS实现打砖块游戏
Feb 14 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
js实现上传图片到服务器
Apr 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
前端性能优化及技巧
2016/05/06 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
详解React 条件渲染
2020/07/08 Javascript
python 实现归并排序算法
2012/06/05 Python
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python求列表交集的方法汇总
2014/11/10 Python
深入解析Python中的WSGI接口
2015/05/11 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
通过实例解析python and和or使用方法
2020/11/14 Python
python xlsxwriter模块的使用
2020/12/24 Python
python实现银行账户系统
2021/02/22 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
公务员保密承诺书
2014/03/27 职场文书
小学捐书活动总结
2014/07/05 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
财产分割协议书
2016/03/22 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
MongoDB balancer的使用详解
2021/04/30 MongoDB
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
详解Python中__new__方法的作用
2022/03/31 Python