进入正题,先说说定时器。
在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>
分享到:
相关推荐
通过本文介绍的焦点图轮播和定时器结合的实例代码,读者可以了解到在没有jQuery等框架支持下,如何利用原生JavaScript实现动态网页效果。这对于提升前端开发能力、优化网站性能以及减少外部依赖都具有重要意义。
- 原理:设定一个时间间隔,只允许函数在该间隔的开始或结束时执行一次。 - 实现:使用setTimeout或setInterval结合当前时间与上次执行时间计算。 4. **焦点管理** - 通过JavaScript获取和设置元素的焦点,例如...
当我们谈论“懒人原生纯js(不依赖现有框架)焦点文字滚动效果”时,这意味着我们将探讨如何利用JavaScript的基本功能实现一个动态的文字滚动效果,而无需借助如jQuery、Vue或React等成熟的JavaScript框架。...
标题“系统每隔一段时间自动点击鼠标左键”所描述的功能,是利用编程技术模拟人手对鼠标左键的点击动作,按照预设的时间间隔自动执行。 实现这一功能通常涉及到以下几个关键技术点: 1. **定时器(Timer)**:...
本文将深入探讨如何利用JavaScript实现可自定义方向(上下左右)的焦点图幻灯片。 1. **基础概念** - **幻灯片(Slider)**:一种网页设计元素,用于在有限的空间内展示多个项目,通常以滑动或切换的形式呈现。 -...
2. **焦点图原理**:焦点图的基本工作原理是通过预加载多张图片,然后根据设定的时间间隔或用户触发的事件,切换显示当前焦点的图片。这通常涉及到CSS(层叠样式表)用于布局和美化,以及JavaScript来处理动态效果和...
JavaScript(简称JS)焦点图轮播是一种常见的网页交互设计,用于展示一组图片或内容,并以自动轮换的方式呈现,常用于网站的首页或者产品展示区域。这种设计可以吸引用户的注意力,提升用户体验。在这个主题中,我们...
4. 时间间隔控制:使用`setInterval`或`setTimeout`函数设置自动轮播的间隔时间,确保图片按照设定的时间间隔切换。 5. 数据存储:可能使用数组来保存焦点图的图片URL或相关信息,方便在代码中遍历和处理。 6. ...
1. **时间处理**:JavaScript的`Date对象`是关键,用于获取当前时间,并与设定的结束时间进行比较,计算剩余的倒计时时间。 2. **定时器(setTimeout或setInterval)**:在JavaScript中,`setTimeout`或`setInterval...
jQuery代码首先会获取所有的图片元素,然后设定初始显示的图片,接下来通过定时器每隔一定时间自动切换到下一张图片。同时,当用户在触屏上滑动时,代码会监听滑动事件,根据滑动方向来手动切换图片。 三、代码实现...
【标题】"js自适应宽度焦点图切换代码"是一个基于JavaScript技术实现的网页焦点图组件,它具有自动适应不同屏幕宽度的功能,适用于响应式网页设计。这个组件通常用于网站的首页或者产品展示区域,能够以动态的方式...
本教程将详细探讨如何利用JavaScript实现"探索频道"风格的大焦点图效果,这种效果通常用于网站的首页或者产品展示区域,以吸引用户的注意力并提供更丰富的视觉体验。 焦点图,又称幻灯片或轮播图,是一种通过定时...
在这个过程中,页面加载完成后会执行window.onload事件,并在此时设定页面的初始状态。页面中还可以通过锚点来实现页面内不同部分之间的快速导航,而链接的href属性则负责指定锚点和参数传递。 本方法的核心在于...
1. 自动轮播:通过定时器设定一定间隔自动切换图片。 2. 手动切换:用户可以通过点击左右箭头或者滑动来手动切换图片。 3. 图片预加载:提前加载即将展示的图片,避免因加载延迟导致用户体验下降。 4. 动画效果:...
6. **定时器与计时事件**: 可以使用JavaScript的`setInterval()`函数实现自动切换,设定一个定时器每隔一定时间执行切换函数。 7. **数据索引与遍历**: 在处理多张图片的切换时,需要跟踪当前显示的图片索引。可以...
**JavaScript焦点自动切图特效详解** 在Web开发中,焦点图是一种常见的视觉设计元素,它能够展示一组图片并自动切换,提升用户体验。本教程将详细讲解如何使用HTML、CSS和JavaScript来创建一个简单的焦点切图特效,...
"js实现三张图(文)片一起切换的banner焦点图特效源码.zip" 是一个使用JavaScript编程语言实现的动态 Banner 效果,适用于网页设计中创建引人注目的图像或文字轮播。这个压缩包包含了一个简单的 Banner 图片切换...