码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-12-14 23:20:28      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

        JavaScript计时事件

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

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

       在JavaScritp中使用计时事件是很容易的,两个关键方法是:

       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>

        运行的结果为:

技术分享

        实例二:另一个简单的计时

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

        运行的结果为:

技术分享

技术分享

技术分享

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

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

        点击开始计时按钮的结果:

技术分享

技术分享

       实例四:  带有停止按钮的无穷循环中的计时事件

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

        点击开始计时的结果:

技术分享

        点击停止计时的结果: 

技术分享

        实例五:使用计时事件制作的钟表
        这个实例其实在前面的博文中已经使用过:
<!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>

         运行的结果为:

技术分享

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

标签:

原文地址:http://blog.csdn.net/erlian1992/article/details/50300905

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!