`
lysvanilla
  • 浏览: 80649 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

获取焦点时,利用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.表单触发或加载时,逐字输出字符串

<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> 
 

 

分享到:
评论

相关推荐

    js原生之焦点图转换加定时器实例

    通过本文介绍的焦点图轮播和定时器结合的实例代码,读者可以了解到在没有jQuery等框架支持下,如何利用原生JavaScript实现动态网页效果。这对于提升前端开发能力、优化网站性能以及减少外部依赖都具有重要意义。

    js实现关灯,防抖动,焦点 时间,选项卡

    - 原理:设定一个时间间隔,只允许函数在该间隔的开始或结束时执行一次。 - 实现:使用setTimeout或setInterval结合当前时间与上次执行时间计算。 4. **焦点管理** - 通过JavaScript获取和设置元素的焦点,例如...

    懒人原生纯js(不依赖现有框架)焦点文字滚动效果

    当我们谈论“懒人原生纯js(不依赖现有框架)焦点文字滚动效果”时,这意味着我们将探讨如何利用JavaScript的基本功能实现一个动态的文字滚动效果,而无需借助如jQuery、Vue或React等成熟的JavaScript框架。...

    系统每隔一段时间自动点击鼠标左键

    标题“系统每隔一段时间自动点击鼠标左键”所描述的功能,是利用编程技术模拟人手对鼠标左键的点击动作,按照预设的时间间隔自动执行。 实现这一功能通常涉及到以下几个关键技术点: 1. **定时器(Timer)**:...

    js焦点图幻灯片 滚动焦点 可修改方向

    本文将深入探讨如何利用JavaScript实现可自定义方向(上下左右)的焦点图幻灯片。 1. **基础概念** - **幻灯片(Slider)**:一种网页设计元素,用于在有限的空间内展示多个项目,通常以滑动或切换的形式呈现。 -...

    大幅JS焦点图切换.rar

    2. **焦点图原理**:焦点图的基本工作原理是通过预加载多张图片,然后根据设定的时间间隔或用户触发的事件,切换显示当前焦点的图片。这通常涉及到CSS(层叠样式表)用于布局和美化,以及JavaScript来处理动态效果和...

    JS焦点图轮播,速度可调

    JavaScript(简称JS)焦点图轮播是一种常见的网页交互设计,用于展示一组图片或内容,并以自动轮换的方式呈现,常用于网站的首页或者产品展示区域。这种设计可以吸引用户的注意力,提升用户体验。在这个主题中,我们...

    傲游网站JS焦点图代码

    4. 时间间隔控制:使用`setInterval`或`setTimeout`函数设置自动轮播的间隔时间,确保图片按照设定的时间间隔切换。 5. 数据存储:可能使用数组来保存焦点图的图片URL或相关信息,方便在代码中遍历和处理。 6. ...

    js结合css3倒计时三秒动画特效.zip

    1. **时间处理**:JavaScript的`Date对象`是关键,用于获取当前时间,并与设定的结束时间进行比较,计算剩余的倒计时时间。 2. **定时器(setTimeout或setInterval)**:在JavaScript中,`setTimeout`或`setInterval...

    jQuery手机焦点图切换特效代码.zip

    jQuery代码首先会获取所有的图片元素,然后设定初始显示的图片,接下来通过定时器每隔一定时间自动切换到下一张图片。同时,当用户在触屏上滑动时,代码会监听滑动事件,根据滑动方向来手动切换图片。 三、代码实现...

    js自适应宽度焦点图切换代码.zip

    【标题】"js自适应宽度焦点图切换代码"是一个基于JavaScript技术实现的网页焦点图组件,它具有自动适应不同屏幕宽度的功能,适用于响应式网页设计。这个组件通常用于网站的首页或者产品展示区域,能够以动态的方式...

    探索频道JS大焦点图效果.rar

    本教程将详细探讨如何利用JavaScript实现"探索频道"风格的大焦点图效果,这种效果通常用于网站的首页或者产品展示区域,以吸引用户的注意力并提供更丰富的视觉体验。 焦点图,又称幻灯片或轮播图,是一种通过定时...

    JavaScript组件焦点与页内锚点间传值的方法

    在这个过程中,页面加载完成后会执行window.onload事件,并在此时设定页面的初始状态。页面中还可以通过锚点来实现页面内不同部分之间的快速导航,而链接的href属性则负责指定锚点和参数传递。 本方法的核心在于...

    能适应各种需求的焦点图代码

    1. 自动轮播:通过定时器设定一定间隔自动切换图片。 2. 手动切换:用户可以通过点击左右箭头或者滑动来手动切换图片。 3. 图片预加载:提前加载即将展示的图片,避免因加载延迟导致用户体验下降。 4. 动画效果:...

    jquery实用焦点图切换

    6. **定时器与计时事件**: 可以使用JavaScript的`setInterval()`函数实现自动切换,设定一个定时器每隔一定时间执行切换函数。 7. **数据索引与遍历**: 在处理多张图片的切换时,需要跟踪当前显示的图片索引。可以...

    js焦点自动切图特效

    **JavaScript焦点自动切图特效详解** 在Web开发中,焦点图是一种常见的视觉设计元素,它能够展示一组图片并自动切换,提升用户体验。本教程将详细讲解如何使用HTML、CSS和JavaScript来创建一个简单的焦点切图特效,...

    js实现三张图(文)片一起切换的banner焦点图特效源码.zip

    "js实现三张图(文)片一起切换的banner焦点图特效源码.zip" 是一个使用JavaScript编程语言实现的动态 Banner 效果,适用于网页设计中创建引人注目的图像或文字轮播。这个压缩包包含了一个简单的 Banner 图片切换...

Global site tag (gtag.js) - Google Analytics