获取焦点时,利用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 相关文章推荐
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
AngularJS Controller作用域
Jan 09 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
页面点击小红心js实现代码
May 26 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获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
原生JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
js实现上传并压缩图片效果
2018/01/10 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python3 socket同步通信简单示例
2017/06/07 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python 多进程队列数据处理详解
2019/12/23 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
普天C++笔试题
2016/03/20 面试题
中文教师求职信
2014/02/22 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
就业协议书怎么填
2014/04/11 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
毕业生政审意见范文
2015/06/04 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript