轻松学习JavaScript十七：JavaScript的BOM学习(二)

JavaScript计时事件

通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法，我们

有能力作到在一个设定的时间间隔之后来运行代码。而不是在函数被调用后马上运行。我们称之为计时事件。

在JavaScritp中使用计时事件是非常easy的。两个关键方法是:

setTimeout()//未来的某时运行代码。

clearTimeout()//取消setTimeout()。

(1)setTimeout()方法

语法

var time=setTimeout("javascript语句",毫秒);

setTimeout()方法会返回某个值。在上面的语句中。值被储存在名为time的变量中。

setTimeout()的第一个參数是

含有JavaScrip 语句的字符串。

这个语句可能诸如 "alert('5 seconds!')"。或者对函数的调用，诸如 alertMsg()"。第二

个參数指示从当前起多少毫秒后运行第一个參数(提示：1000 毫秒等于一秒)。

(2)clearTimeout()方法

语法

clearTimeout(setTimeout_variable);

假如你希望取消上面的setTimeout()。你能够使用这个time变量名来指定它。也就是能够这样写：

clearTimeout(time);

那么以下我们就来说几个实例：

实例一：简单的计时

<!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>JS计时事件</title>

<script type="text/javascript">

function timeCount()

{

    var time=setTimeout("alert('5秒到了。！！

')",5000);

}

</script>

</head>

<body>

<form>

<input type="button" value="開始计时" onClick = "timeCount()" />

</form>

<p>请点击上面的按钮。

警告框会在開始后5秒后显示出来。

</p>

</body>

</html>

执行的结果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

实例二：还有一个简单的计时

<!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>JS计时事件</title>

<script type="text/javascript">

function timeCount()

{

var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)

var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)

var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)

}

</script>

</head>

<body>

<form>

<input type="button" value="显示计时的文本" onClick="timeCount()" />

<input type="text" id="txt" />

</form>

<p>点击上面的按钮。输入框会显示出已经逝去的时间(2,4,6秒)。</p>

</body>

</html>

执行的结果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

实例三：一个无穷循环的计时事件

<!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>JS计时事件</title>

<script type="text/javascript">

var time;//计时事件变量

var c=0;//文本框显示的数据

function timeCount()

{

    document.getElementById('test').value=c;

    c=c+1;

    time=setTimeout("timeCount()",1000);

}

</script>

</head>

<body>

<form>

<input type="button" value="開始计时" onClick = "timeCount()" />

<input type="text" id="test" />

</form>

<p>请点击上面的按钮。输入框会从0開始一直进行计时。</p>

</body>

</html>

点击開始计时button的结果：

实例四：带有停止button的无穷循环中的计时事件

<!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>JS计时事件</title>

<script type="text/javascript">

var time;//计时事件变量

var c=0;//文本框显示的数据

function timeCount()

{

    document.getElementById('test').value=c;

    c=c+1;

    time=setTimeout("timeCount()",1000);

}

function stopCount()

{

    c=0;

    setTimeout("document.getElementById('test').value=0",0);

    clearTimeout(time);

}

</script>

</head>

<body>

<form>

<input type="button" value="開始计时" onClick = "timeCount()" />

<input type="text" id="test" />

<input type="button" value="停止计时" onClick="stopCount()" />

</form>

<p>请点击上面的“開始计时”按钮来启动计时器。输入框会一直进行计时，从0開始。

<br/>

点击“停止计时”按钮能够终止计时，并将计数重置为0。</p>

</body>

</html>

点击開始计时的结果：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

点击停止计时的结果：

实例五：使用计时事件制作的钟表

这个实例事实上在前面的博文中已经使用过：

<!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>JS计时事件</title>

<script type="text/javascript">

function startTime()

{

    var today=new Date();

    var hour=today.getHours();

    var minute=today.getMinutes();

    var second=today.getSeconds();

	//小于10在数字前面家一个0

	minute=checkTime(minute);

    second=checkTime(second);

    document.getElementById("test").innerHTML=hour+":"+minute+":"+second;

    var time=setTimeout("startTime()",500);

}

function checkTime(i)

{

    if (i<10)

    {

          return i="0" + i;

    }

    else

   {

          return i;

   }

}

</script>

</head>

<body onload="startTime()">

<div id="test"></div>

</body>

</html>

执行的结果为：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

巴特西

轻松学习JavaScript十七：JavaScript的BOM学习(二)

最新文章

热门文章