获取焦点时,利用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 鼠标拖动图标技术
Feb 07 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
javascript中正则表达式语法详解
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
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
浅析Python中的序列化存储的方法
2015/04/28 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python PIL库图片灰化处理
2020/04/07 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python Zmail模块简介与使用示例
2020/12/19 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
C语言中break与continue的区别
2012/07/12 面试题
出国留学自荐信
2013/10/25 职场文书
教师师德反思材料
2014/02/15 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
12岁生日演讲稿
2014/05/14 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书