当前位置：首页 > 资讯 > 技术文档

javascript计时器事件使用详解

时间：2020-11-06 17:52 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript计时器事件使用详解

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是: [b]setTimeout() [/b]未来的某时执行代码 [b]clearTimeout() [/b]取消setTimeout() setTimeout() 语法

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

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。 setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。第二个参数指示从当前起多少毫秒后执行第一个参数。提示：1000 毫秒等于一秒。当下面这个例子中的按钮被点击时，一个提示框会在5秒中后弹出。

[u]复制代码[/u] 代码如下:

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

实例 -[b]无穷循环[/b] 要创建一个运行于无穷循环中的计时器，我们需要编写一个函数来调用其自身。在下面的例子中，当按钮被点击后，输入域便从 0 开始计数。

[u]复制代码[/u] 代码如下:

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>

</html>

[b]clearTimeout()[/b] 语法

[u]复制代码[/u] 代码如下:

clearTimeout(setTimeout_variable)

实例下面的例子和上面的无穷循环的例子相似。唯一的不同是，现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器：

[u]复制代码[/u] 代码如下:

<html>
<head>
<script type="text/javascript">
var c=0
var t

function timedCount()
 {
 document.getElementById('txt').value=c
 c=c+1
 t=setTimeout("timedCount()",1000)
 }

function stopCount()
 {
 clearTimeout(t)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>

另外两个重要的方法:

[u]复制代码[/u] 代码如下:

setInterval()
setInterval() - executes a function, over and over again, at specified time intervals

作用是:循环执行一个方法,在规定的间隔时间内语法:

[u]复制代码[/u] 代码如下:

window.setInterval("javascript function",milliseconds);

说明:第一个参数必须是一个函数,第二个参数是执行函数的间隔时间. 实例:

[u]复制代码[/u] 代码如下:

<html>
<script type="text/javascript">
setInterval(function() {alert("hello")},500);
</script>
</html>

说明:上面例子,执行效果是说每隔500ms就alert("hello"); 再来一个时钟:

[u]复制代码[/u] 代码如下:

<html>
<body>
<p id="demo" ></p>
<script type="text/javascript">
setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
</script>
</body>
</html>    

如何停止,setInterval()方法??

[u]复制代码[/u] 代码如下:

window.clearInterval()

语法:

[u]复制代码[/u] 代码如下:

window.clearInterval(intervalVariable)

[u]复制代码[/u] 代码如下:

The window.clearInterval() method can be written without the window prefix.
To be able to use the clearInterval() method, you must use a global variable when creating the interval method:

myVar=setInterval("javascript function",milliseconds);
Then you will be able to stop the execution by calling the clearInterval() method.

实例:

[u]复制代码[/u] 代码如下:

<html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
   <html>
<body>
<p id="demo" ></p>
<p id="demo2" onclick="stop()">stop</p>
<script type="text/javascript">
var temp=setInterval(function(){ myTimer()},1000);
        function  myTimer(){
                var d = new Date();
                var t=d.toLocaleTimeString();
                document.getElementById('demo').innerHTML=t;
        }
function stop(){
        clearInterval(temp);
}
</script>
</body>
</html>
}
</script>
</body>
</html>

全部评论(0)

上一篇：关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
下一篇：js获取select标签的值且兼容IE与firefox

资讯排行榜
更多>>