定义和用法
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到
clearInterval()
被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
提示:
1000 毫秒= 1 秒。
提示:
如果你只想执行一次可以使用
setTimeout()
方法。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
var
myVar
=
setInterval
(
function
(
)
{
myTimer
(
)
}
,
1000
)
;
function
myTimer
(
)
{
var
d
=
new
Date
(
)
;
var
t
=
d
.
toLocaleTimeString
(
)
;
document
.
getElementById
(
"
demo
"
)
.
innerHTML
=
t
;
尝试一下 »
使用 clearInterval() 来停止 setInterval 的执行:
var
myVar
=
setInterval
(
function
(
)
{
myTimer
(
)
}
,
1000
)
;
function
myTimer
(
)
{
var
d
=
new
Date
(
)
;
var
t
=
d
.
toLocaleTimeString
(
)
;
document
.
getElementById
(
"
demo
"
)
.
innerHTML
=
t
;
function
myStopFunction
(
)
{
clearInterval
(
myVar
)
;
尝试一下 »
使用 setInterval() 和 clearInterval()来创建动态进度条:
function
move
(
)
{
var
elem
=
document
.
getElementById
(
"
myBar
"
)
;
var
width
=
0
;
var
id
=
setInterval
(
frame
,
10
)
;
function
frame
(
)
{
if
(
width
==
100
)
{
clearInterval
(
id
)
;
}
else
{
width
++;
elem
.
style
.
width
=
width
+
'
%
'
;
尝试一下 »
每 300 毫秒切换背景颜色:
var
myVar
=
setInterval
(
function
(
)
{
setColor
(
)
}
,
300
)
;
function
setColor
(
)
{
var
x
=
document
.
body
;
x
.
style
.
backgroundColor
=
x
.
style
.
backgroundColor
==
"
yellow
"
?
"
pink
"
:
"
yellow
"
;
function
stopColor
(
)
{
clearInterval
(
myVar
)
;
尝试一下 »
传递参数给 alertFunc 函数 ( IE9 及其更早版本不支持):
var
myVar
;
function
myStartFunction
(
)
{
myVar
=
setInterval
(
alertFunc
,
2000
,
"
Runoob
"
,
"
Google
"
)
;
尝试一下 »
但是,如果使用匿名函数,则所有浏览器都支持:
var
myVar
;
function
myStartFunction
(
)
{
myVar
=
setInterval
(
function
(
)
{
alertFunc
(
"
Runoob
"
,
"
Google
"
)
;
}
,
2000
)
;
尝试一下 »
Window 对象:
clearInterval() 方法
Window 对象:
setTimeout() 方法
Window 对象:
clearTimeout() 方法
Window 对象