js进阶篇【续——计时器】

问题一:setInterval()方法。每隔指定的时间执行代码。

语法:setInterval(方法,时间)    例:setInterval(clock,1000)

实例讲解:

<html>

<head>

<script>

function clock(){

var _date = new Date();

var _sttrtime = _date.getHours()+":"+_date.getMinutes()+":"+_date.getSeconds();

document.getElemengById("clock").value = _sttrtime ;

}

setInterval(clock,1000);

</script>

</head>

<body>

<form>

<input id="clock" name="clock" size="50"  />

</form>

</body>

</html>

在以上代码中,显现的效果是这样一个简易的时钟。

分析一下代码的结构,首先页面上得有一个放时间的text框。然后必须有Date的对象来获得时间。最后必须得每秒更改text框中显示的时间,以达到我们看到的时间跳动的效果。所以这段代码的核心之处就在于每隔1000ms也就是一秒钟执行一遍clock函数,动态为text框赋值。

问题二:clearInterval()   取消setInterval()函数的效果

如何使用?继上面那个例子,我如果想要实现有一个stop按钮,点击以后就停止计时怎么实现。

var i = setInterval(clock,1000);

给button添加click事件,例:onclick = "clearInterval(i)"

这样,点击按钮以后就会触发clearInterval方法,通过i就能找到取消的到底是哪个计时器。

问题三:载入指定延迟时间后执行表达式setTimeout()

语法:setTimeout(codes,time)   例:setTimeout(clock,1000)

这里需要注意的是这个方法表达的意思是延迟一秒执行clock函数。重点就是只执行一次,我们还记得setInterval()方法是每隔一秒执行一遍clock函数。那如果我们想要用setTimeout函数来实现一直执行的效果怎么办呢?就是把函数调用写在clock函数内部,形成死循环的局面,再在函数外部调用执行一下clock函数。例:


问题四:取消setTimeout()方法的效果

例:


以上代码实现的是当点击start按钮后开始计数,点击stop按钮后结束计数。

注意:我们看到声明了一个全局i,因为在两个方法中都用到了它。所以不要声明成局部变量了,那样的话stop按钮将不起效果。


问题五:history对象

语法:window.history.属性/方法

例:

返回前一个浏览的页面:

window.history.go(-1);

或 window.hostory.back();

返回下一个浏览的页面:

window.history.forward();

或者window.history.go(1);

同理,比如要访问当前之前的第二个页面window.history.go(-2)。以此类推的规律。

问题六:location对象   用于获取或者设置窗体的url,并且可以用于窗体的url解析

语法:location.属性/方法



属性


方法


问题七:navigator对象。包含浏览器的各种信息,通常用于检测浏览器的版本和操作系统的版本。

语法:navigator.属性或方法

属性


猜你喜欢

转载自blog.csdn.net/Dai_Aixy/article/details/80857784