获取焦点时,利用js定时器设定时间执行动作
网上有很多类似的知识,并不是有什么难度的技巧,仅仅是开发过程中的一点点积累而已。
进入正题,先说说定时器。
在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.表单触发或加载时,逐字输出字符串
2 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
3 <title>无标题文档</title>
4 <script language="JavaScript" type="text/javascript">
5 var str = "这个是测试用的范例文字";
6 var seq = 0;
7 var second=1000; //间隔时间1秒钟
8 function scroll() {
9 msg = str.substring(0, seq+1);
10 document.getElementById('word').innerHTML = msg;
11 seq++;
12 if (seq >= str.length) seq = 0;
13 }
14 </script>
15 </head>
16 <body onload="setInterval('scroll()',second)">
17 <div id="word"></div><br/><br/>
18 </body>
19 </html>
例2.当焦点在输入框的时候,定时检查输入框信息,焦点不在时不执行检查动作。
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 <script language="JavaScript" type="text/javascript">
7 var second=5000; //间隔时间5秒钟
8 var c=0;
9 function scroll() {
10 c++;
11 if ("b" == document.activeElement.id) {
12 var str="定时检查第<b> "+c+" </b>次<br/>";
13 if(document.getElementById('b').value!=""){
14 str+="输入框当前内容为当前内容为<br/><b> "+document.getElementById('b').value+"</b>";
15 }
16 document.getElementById('word').innerHTML = str;
17 }
18 }
19 </script>
20 </head>
21 <body>
22 <textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
23 <div id="word"></div><br/><br/>
24 </body>
25 </html>
26
例3.下面这个是最简单的例子,定时器时间到达后弹出警告窗口。
<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>
转载于:https://www.cnblogs.com/canon/archive/2010/04/02/1703148.html
获取焦点时,利用js定时器设定时间执行动作相关推荐
- php日期格式化年月日时分秒,js将当前时间格式化为年月日时分秒格式详解
本文主要介绍了js将当前时间格式化为 年-月-日 时:分:秒主要是使用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒,需要的朋友可以参考下,希望能帮助到大家. 利用js的Date ...
- ajax定时器怎么写,js定时器怎么写?就是在特定时间执行某段程序
js定时器怎么写?就是在特定时间执行某段程序 复制代码 代码如下: $(function(){ var handler = function(){ } var timer = setInterval( ...
- js定时器每天固定时间执行任务
需求:在每天的固定时间执行任务,例如每天早上08:00起床,09:00刷牙,固定时间执行固定的任务 首先,定义一个方法,在方法内接收四个参数,一个参数是接收间隔的天数,第二个参数是接收具体某个时间点, ...
- js实现倒计时,定时器--完成时间倒计时
js实现倒计时,定时器–完成时间倒计时 //每秒刷新一次 setInterval(function showtime() {//结束时间var endTime = document.getElemen ...
- Timer定时器,每天固定时间执行
下面是之前在项目中使用到的定时器实现代码(每当项目重新启动时执行ExecutionTimer方法) executionTime :定时执行的时间,我设置的是每天19点定时执行一次,也可以把这个拎出去, ...
- JS定时器使用,定时定点,固定时刻,循环执行
本文概述:本文主要介绍通过JS实现定时定点执行,在某一个固定时刻执行某个函数的方法.比如说在下一个整点执行,在每一个整点执行,每隔10分钟定时执行的方法. JavaScript中有两个定时器方法:se ...
- js将当前时间格式化为年-月-日 时:分:秒
利用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒.也可以自己定义格式.(做项目时遇到这个问题.本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!D ...
- 利用RunLoop空闲时间执行预缓存任务
利用RunLoop空闲时间执行预缓存任务 最近在做高度自适应的UITableView的时候,使用了一个FDTemplateLayoutCell的开源组件. 它的主要原理是利用RunLoop空闲时间执行 ...
- js网站服务器时间,js获取本地时间、服务器时间、记时
js获取本地时间.服务器时间.倒计时 untitled get=function (id){return document.getElementById(id)} if(document.all){ ...
最新文章
- 模生物嗅觉的神经算法,能让电脑芯片识别气味
- tkinter中button按钮控件(三)
- 一个入门的学生选课系统
- 自己总结的sql基本操作
- 深度优先搜索——选数(洛谷 P1036)
- Android笔记 fragment入门 动态加载fragment demo+ 判断横竖屏
- ReactNative 启动js server报错:Metro Bundler can't listen on port 8081
- android 浏览器 内核版本,Android集成三方浏览器之X5内核
- json数据格式转换成csv数据格式,并保存
- WebView加载淘宝,天猫链接失败
- 搭建FTP服务器后访问时出现“FTP文件夹错误 无法与服务器建立连接”的解决办法
- word生成目录右对齐
- 2023编程语言趋势
- 汇编语言of常用指令
- Cadence PSpice 教程 基础篇(转载)
- C++设计模式——模板方法模式(高屋建瓴)
- 按首字母升序输出国家名称
- mysql 连续七天不登录_使用MySQL窗口函数巧妙的解决用户连续登录天数等问题
- 【VIS】Classifying,Segmenting,and Tracking Object Instances in Video with Mask Propagation
- 阿里云服务器 通过JavaMail发送邮箱STMP问题( 25端口被禁用 使用SSL协议465端口