js 定时器: js控制图片定时切换不限制数量_脚本技术_前端技术
您的位置： &
& 详细内容
&!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/ charset=gb2312& /&&title&无标题文档
&/title&&/head&&body&&div id=&ImageDiv& style=&overflow:height:253width:410&&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&11&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&22&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&33&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&44&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&55&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&66&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&77&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&88&/p&&p style=&display:&&&img src=/html/wyzz/JavaScript_Ajax//&img/.jpg&&99&/p&&/div&&script&var speed=3000;var imgObj=document.getElementById(&ImageDiv&).getElementsByTagName(&p&);var imgNum=imgObj.var mm=0;var ImgTurn=function(){&&& if(mm==imgNum)&{&&& mm=0;&}&imgObj[mm].style.display=&block&;&if(mm==0)&{&&&& imgObj[imgNum-1].style.display=&none&;&}&else&{&&&& imgObj[mm-1].style.display=&none&;&}&mm++;}var myTurn=setInterval(ImgTurn,speed);//鼠标移上时清除定时器达到滚动停止的目的document.getElementById(&ImageDiv&).onmouseover=function() {clearInterval(myTurn);}//鼠标移开时重设定时器document.getElementById(&ImageDiv&).onmouseout=function(){myTurn=setInterval(ImgTurn,speed)};&/script&&/body&&/html&
本文链接/html/wyzz/JavaScript_Ajax/57.html
相关排行总榜js 定时器有以下两个方法：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
setInterval()
setInterval(code,millisec,lang)
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang 可选。 JScript | VBScript | JavaScript
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
&input type="text" id="clock" /&
&script type="text/javascript"&
var int=self.setInterval("clock()",1000);
function clock()
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
&button onclick="int=window.clearInterval(int)"&停止&/button&
setTimeout()
setTimeout(code,millisec,lang)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
lang 可选。脚本语言可以是：JScript | VBScript | JavaScript
实例演示如下：
&!DOCTYPE html&
&meta charset="utf-8"&
&title&菜鸟教程()&/title&
&p&点击按钮，在等待 3 秒后弹出 "Hello"。&/p&
&button onclick="myFunction()"&点我&/button&
function myFunction()
setTimeout(function(){alert("Hello")},3000);
记住登录状态
重复输入密码JavaScript定时器详解
一、setTimeout
&setTimeout(function(){
&&& //要执行的代码&&&&&&&&&&&&&&&&&&&&&
理解：指隔200ms后,定时器代码被添加到队列中,等待Script进程空闲后,代码才执行
二、setInterval
&setInterval(function(){
&&& //要执行的代码&&&&&&&&&&&&&&&&&&&&&
1、上面代码是指每隔200ms就创建一个执行代码的定时器
2、当使用setInterval时,仅当(在队列中)没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,引用高级程序设计第二版书中语句
(即：当前一个定时器代码执行时,紧跟后面的第一个定时器代码将添加到队列中,等待执行,再后面的定时器代码不会添加到队列中)
当定时器代码执行时间(假如需要600ms才执行完)超过指定间隔(这里是200ms),那么某些定时器代码就会被跳过(即后面的定时器代码不会被添加到队列中),
前一个定时器代码执行完毕后,队列中的定时器代码立刻执行,各定时器之间的代码执行没有间隔
C、解决方法：
使用链式setTimeout,如：
&setTimeout(function(){
&&& //要执行的代码
&&& setTimeout(arguments.callee,200);
这样做的好处是:前一个定时器要执行的代码执行完且等待200ms后,才创建一个新的定时器,并把定时器代码添加到队列中执行
即：不会出现定时器代码被跳过的情况;定时器之间的代码执行可以有间隔(根据自己设置)
D、实际应用：
1、javascript脚本会阻塞处理其他事件,如与用户的交互,如果一段js脚本运行的时间过长,那么我们可以使用js定时器,腾出空闲,避免用户等过长时间
2、理解函数节流
函数节流：指某些代码不可以在没有间断的情况下连续执行
看下面代码：
&window.onresize = function(){
&&& console.log(document.documentElement.clientHeight);
//在resize事件处理程序结束之前,一直输出着浏览器视口高度
当你在调整浏览器窗口大小时,resize事件处理程序中代码就一直在运行着
改进代码：
var timeoutId =
window.onresize = function(){
&&& clearTimeout(timeoutId);
&&& timeoutId = setTimeout(function(){
&&&&&&& console.log(document.documentElement.clientHeight);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&& },100);
封装以后的改进代码：
&function cHeight(){
&&& console.log(document.documentElement.clientHeight);
function throttle(method,context){
&&& clearTimeout(method.tId);
&&& method.tId = setTimeout(function(){
&&&&&&& method.call(context);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&& },100);
window.onresize = function(){
&&& throttle(cHeight);&&
//在resize事件处理程序结束后,等待100ms后代码添加到队列中执行,
&只输出最后一个定时器代码结果,浏览器不会在极短的时间内进行过多的计算
摘自& 华子yjh
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'js定时器setInterval()与setTimeout()区别、10秒自动跳转 - Only the heart peace will be prosperity - ITeye技术网站
博客分类：
####10秒自动跳转
&div class="jf_register"&
&h2&您好，欢迎光临&fmt:message key="b2cShowName"/&！&a class="blue" href="&%=path%&/LoginRegist_turnToLogin"&请登录&/a&&/h2&
&div class="jf_register_banner"&注册成功&/div&
&div class="jf_password"&
&li& 感谢您选择&fmt:message key="b2cShowName"/&，&/li&&li&您的账号&span&
&font color=red&&strong&${param.bussinessId}&/strong&&/font&&/span&已经注册成功。 &/li&
&li&系统将会在&strong id="endtime"&&/strong&秒后跳转到登录页！
&a class="blue" href="&%=path%&/LoginRegist_turnToLogin"&直接登录&/a&&/li&
&div class="jf_loginfooter"&&fmt:message key="copyright"/&&版权所有&|
&a href="Login_loginHelpTips"&联系我们&/a&&fmt:message key="copyrightIcp"/&&/div&
&script type="text/javascript"&
var i = 10;
function remainTime(){
location.href='&%=path%&';
document.getElementById('endtime').innerHTML=i--;
setTimeout("remainTime()",1000);
remainTime();
setInterval()循环执行相应的方法
&script type="text/javascript"&
setInterval("myInterval()",1000);//1000为1秒钟
function myInterval()
alert('aaaaaaaaa');
1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("",time) 设置一个超时对象
2.setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
setInterval("",time) 设置一个超时对象
SetInterval为自动重复，setTimeout不会重复。
3.1clearTimeout(对象) 清除已设置的setTimeout对象
3.2clearInterval(对象) 清除已设置的setInterval对象
我在项目中这样使用setTimeout
&!-- 系统公告紧急弹窗 --&
&script type="text/javascript" src="&%=path%&/js/jquery-1.4.4.min.js"&&/script&
&script type="text/javascript" src="&%=path%&/js/artDialog/artDialog.min.js"&&/script&
&script type="text/javascript"&
function querySystemNotice()
$.post( 'bussinessNotice_querySystemNotice', {},
function(returnedData,status)
if( returnedData!= null && returnedData!='' )
$.dialog.open('&%=path%&/
bussinessNotice_bussinessNoticedetail?noticeNum='+returnedData,{
window:'top',
width: '800px',
height: '400px',
title:false,
border:false,
lock: true,
esc:false,
left:'center',
content:'',
yesText:'确认阅读',
yesFn: function(){
$.post( '&%=path%&/
bussinessNotice_bussinessNoticeAffirmRead?noticeNum='+returnedData,{},
function(returnedData2,status)
//art.dialog.tips('已阅读！',1);
window.location.reload();
window.location.reload();
setTimeout("querySystemNotice()",1000*60);//1000为1秒钟,设置为1分钟。
4.2 我在项目中使用 setInterval()：
&script type="text/javascript"&
var value = '${sessionScope.refTime}';
setInterval("refMoney()", value);
/*更新商户姓名、佣金额、资金额*/
function refMoney(){
type:'post',
url:'Login_refMoney',
async: false ,
dataType:'json',
success:function(data){
$("#bussinessName").html("");
$("#bussinessAccount").html("");
$("#bussinessCommission").html("");
$("#bussinessName").html(data.bussinessName);
$("#bussinessAccount").html(data.bussinessAccount);
$("#bussinessCommission").html(data.bussinessCommission);
//refMoney();
/*退出系统*/
function logout(){
if(confirm("确定退出系统吗?")) {
window.parent.parent.location.replace("&%=path%&");
&div class="welcome"&
欢迎&&&font id="bussinessName"&${user.bussinessName }&/font&&&&&
佣金额：&font id="bussinessAccount"&
&fmt:formatNumber value="${user.bussinessAccount }" pattern="#0.00" type="number"/&
&/font&&&&&
资金额：&font id="bussinessCommission"&
&fmt:formatNumber value="${user.bussinessCommission }" pattern="#0.00" type="number"/&
&/font&&&&&|&&
&a href="&%=path%&/Login_loginRight" target="main" &平台首页&/a&& &&|&&
&a href="javascript:logout();" &安全退出&/a&
================================================================================================
5.转载内容：
这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。
实际上，setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔，当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的，setInterval在执行完一次代码之后，经过了那个固定的时间间隔，它还会自动重复执行代码，而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上，不过可以通过创建一个函数循环重复调用setTimeout，以实现重复的操作：
settimeout_setinterval.js
showTime();
showTime()
The time is:
today.toString());
setTimeout(
showTime()
一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间。如果使用setInterval，则相应的代码如下所示：
settimeout_setinterval2.js
setInterval(
showTime()
showTime()
The time is:
today.toString());
这两种方法可能看起来非常像，而且显示的结果也会很相似，不过两者的最大区别就是，setTimeout方法不会每隔5秒钟就执行一次showTime函数，它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完，那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚，它只是简单地每隔一定时间就重复执行一次那个函数。
如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout。
函数指针的使用
两个计时函数中的第一个参数是一段代码的字符串，其实该参数也可以是一个函数指针，不过Mac下的IE 5对此不支持。
如果用函数指针作为setTimeout和setInterval函数的第二个参数，那么它们就可以去执行一个在别处定义的函数了：
setTimeout(showTime, 500);
function showTime()
var today = new Date();
alert("The time is: " + today.toString());
另外，匿名函数还可以声明为内联函数：
setTimeout(function(){var today = new Date();
alert("The time is: " + today.toString());},
如果对计时函数不加以处理，那么setInterval将会持续执行相同的代码，一直到浏览器窗口关闭，或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。
当setInterval调用执行完毕时，它将返回一个timer
ID，将来便可以利用该值对计时器进行访问，如果将该ID传递给clearInterval，便可以终止那段被调用的过程代码的执行了，具体实现如下：
settimeout_setinterval3.js (excerpt)
intervalProcess
setInterval(
alert('GOAL!')
stopGoalLink
document.getElementById(
stopGoalLink
attachEventListener(stopGoalLink,
, stopGoal,
stopGoal()
clearInterval(intervalProcess);
只要点击了stopGoalLink，不管是什么时候点击，intervalProcess都会被取消掉，以后都不会再继续反复执行intervalProcess。如果在超时时间段内就取消setTimeout，那么这种终止效果也可以在setTimeout身上实现，具体实现如下：
settimeout_setinterval4.js (excerpt)
timeoutProcess
setTimeout(
alert('GOAL!')
stopGoalLink
document.getElementById(
stopGoalLink
attachEventListener(stopGoalLink,
, stopGoal,
stopGoal()
clearTimeout(timeoutProcess);
浏览 224404
浏览: 1353511 次
来自: 哈尔滨
今天也跟着学习了，用到了
讲解的很不错。URLConnection类的内容也可以看这篇文 ...}