JavaScript沙漏示例解析,javascript测量时间的装置事

2019-07-22 作者:网站首页   |   浏览(121)

1.什么是JavaScript计时器?

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

在JavaScript中,我们可以在设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。

setTimeout() 未来的某时执行代码

2.计时器类型

clearTimeout() 取消setTimeout()
setTimeout()
语法

一次性计时器:仅在指定的延迟时间之后触发一次。
间隔性触发计时器:每隔一定的时间间隔就触发一次

复制代码 代码如下:

3.计时器方法

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

1):一次性计时器

setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次

第二个参数指示从当前起多少毫秒后执行第一个参数。

语法:setTimeout(代码,延迟时间);

提示:1000 毫秒等于一秒。

参数说明:

当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出。

  1. 要调用的函数或要执行的代码串。
  2. 延时时间:在执行代码前需等待的时间,以毫秒为单位(1s=1000ms)。

复制代码 代码如下:

B):clearTimeout():取消setTimeout()设置

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>

语法:clearTimeout(timer)

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

参数说明:
timer:由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

实例 - 无穷循环

调用setTimeout()和clearTimeout()延迟方法:

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

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript计时器</title>
        <input type="button" value="开始" id="btnStart" onclick="StartPrint()">
        <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
        <br>
    </head>
    <body>
        <script type="text/javascript">
            //定义打印方法
            function Print()
            {
                console.log("我在打印!");
            }
            var timer;//该值标识要取消的延迟执行代码块
            //开始打印
            function StartPrint()
            {
                timer=setTimeout(Print,1000);//调用计时器,延迟1秒打印,只执行一次
            }
            //结束打印
            function StopPrint()
            {
                clearTimeout(timer);//取消计时器
            }
        </script>
    </body>
</html>

<html>

调用setTimeout()和clearTimeout()无限循环方法:

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript计时器</title>
        <input type="button" value="开始" id="btnStart" onclick="StartPrint()">
        <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
        <br>
    </head>
    <body>
        <script type="text/javascript">
            //定义打印方法
            function Print()
            {
                console.log("我在打印!");
                timer=setTimeout(Print,1000);//开始计时器,调用自己,进行无穷循环
            }
            var timer;//该值表示要取消延迟执行的代码块
            //开始打印
            function StartPrint()
            {
                Print();//调用打印方法
            }
            //结束打印
            function StopPrint()
            {
                clearTimeout(timer);//取消计时器
            }
        </script>
    </body>
</html>

</html>

 
2):间隔性触发计时器

clearTimeout()

A):setInterval():在执行时,从载入页面后每隔指定的时间执行代码

语法

语法:setInterval(代码,交互时间);

复制代码 代码如下:

参数说明:

clearTimeout(setTimeout_variable)  

  1. 代码:要调用的函数或要执行的代码串。

实例

2. 交互时间:周期性执行或调用表达式之间的时间间隔,以毫秒计(1s=1000ms)。

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

返回值:

复制代码 代码如下:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

<html>

调用函数格式(假设有一个clock()函数):

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

setInterval("clock()",1000) 或 setInterval(clock,1000)

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

B):clearInterval() 方法可取消由 setInterval() 设置的交互时间

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

语法:clearInterval(timer)

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

参数说明:
timer:由 setInterval() 返回的 ID 值。

另外两个重要的方法:

调用setInterval()和clearInterval() 执行间隔执行方法实例

复制代码 代码如下:

复制代码 代码如下:

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript计时器</title>
        <input type="button" value="开始" id="btnStart" onclick="StartPrint()">
        <input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
        <br>
    </head>
    <body>
        <script type="text/javascript">
            //定义打印方法
            function Print()
            {
                console.log("我在打印!");
            }
            var timer;//该值标识要取消的计时器执行代码块
            //开始打印
            function StartPrint()
            {
            timer=setInterval("Print()",1000);//开始计时器
            }
            //结束打印
            function StopPrint()
            {
                clearInterval(timer);;//取消计时器
            }
        </script>
    </body>
</html>

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

以上就是本文所述的全部内容了,希望小伙伴们能够喜欢。

语法:

您可能感兴趣的文章:

  • JS 页面计时器示例代码
  • Node.js中使用计时器定时执行函数详解
  • VB倒计时器和JS当前时间
  • javascript计时器事件使用详解
  • JavaScript分秒倒计时器实现方法
  • javascript实现计时器的简单方法
  • javascript设计简单的秒表计时器
  • javascript实现的简单计时器
  • javascript计时器详解
  • 原生js实现秒表计时器功能

复制代码 代码如下:

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

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

实例:

复制代码 代码如下:

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

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

再来一个时钟:

复制代码 代码如下:

<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()方法??

复制代码 代码如下:

window.clearInterval()

语法:

复制代码 代码如下:

window.clearInterval(intervalVariable)

复制代码 代码如下:

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.

实例:

复制代码 代码如下:

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

您可能感兴趣的文章:

  • JS 页面计时器示例代码
  • Node.js中使用计时器定时执行函数详解
  • javascript实现计时器的简单方法
  • JavaScript分秒倒计时器实现方法
  • VB倒计时器和JS当前时间
  • javascript设计简单的秒表计时器
  • 原生js实现秒表计时器功能
  • javascript计时器详解
  • javascript实现的简单计时器
  • js编写简单的计时器功能

本文由yzc216亚洲城发布于网站首页,转载请注明出处:JavaScript沙漏示例解析,javascript测量时间的装置事

关键词: yzc216亚洲城