定期函数,JS使用沙漏达成轻松挂历机械钟

setInterval() 方法

一setTimeout函数和setInterval函数的语法以及利用

一setTimeout函数和setInterval函数的语法以及选择

   
大家一般在浏览网页的时候,一般都会有图表轮播等,一些相比有意思的特效,接下去自个儿就给大家讲讲那俩个函数!

概念和用法

setInterval() 方法可比照钦定的周期(以纳秒计)来调用函数或总括表明式。

setInterval() 方法会不停地调用函数,直到 clearInterval()
被调用或窗口被关门。由 setInterval() 重临的 ID 值可用作 clearInterval()
方法的参数。

1.setTimeout函数

定期函数,JS使用沙漏达成轻松挂历机械钟。1.setTimeout函数

一setTimeout函数和setInterval函数的语法以及采用

语法

setInterval(code,millisec[,”lang”])

定期函数,JS使用沙漏达成轻松挂历机械钟。code:要调用的函数或要实践的代码串。

millisec:周期性实行或调用 code 之间的小时间隔,以微秒计。

概念和用法:setTimeout()方法用于在钦赐的微秒数后调用函数或总计表达式。  

概念和用法:set提姆eout()方法用于在内定的纳秒数后调用函数或总计表达式。  

1.setTimeout函数

演示:轻巧挂历时钟

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>简易时钟</title>
 6     <style>
 7         #time{width: 300px;height: 60px;margin:0px auto;line-height: 60px;text-align: center;color: white;background-color: green;}
 8     </style>
 9 </head>
10 <body>
11     <!-- 时间区域 -->
12     <div id="time"></div>
13 </body>
14 <script>
15     //开启定时器
16     setInterval(function(){
17         //Date对象,启用基本存储器并取得日期和时间
18         var d = new Date();
19         var time = document.getElementById('time');
20         //获取当前区域时间并转成字符串
21         time.innerHTML = d.toLocaleString();
22     },1000);
23 </script>
24 </html>

 

语法:setTimeout(code,millisec);

语法:setTimeout(code,millisec);

概念和用法:setTimeout()方法用于在钦赐的飞秒数后调用函数或计算表达式。   

参数:

参数:

语法:setTimeout(code,millisec);

code
(必需):要调用的函数后要实施的 JavaScript 代码串。   

code
(必需):要调用的函数后要实践的 JavaScript 代码串。   

皇家赌场手机版,参数:

millisec(必需):在实行代码前需等待的阿秒数。  

millisec(必需):在实施代码前需等待的纳秒数。  

code (必需):要调用的函数后要执行的 JavaScript 代码串。   

注意:

注意:

millisec(必需):在施行代码前需等待的纳秒数。  

setTimeout() 只进行code 2回。假如要再叁调用,请使用 setInterval() 可能让 code 自己再一次调用
set提姆eout()。

setTimeout() 只实行code 三次。如若要反复调用,请使用 setInterval() 恐怕让 code 自个儿再一次调用
setTimeout()。

提示:

返回值

一个足以传递给
Window.clearTimeout() 从而撤销对 code 的周期性推行的值。

既然set提姆eout是2个计时器函数,那么就有二个1个函数来清理放大计时器,那我们就用到了clearTimeout函数。

clearTimeout(setTimeout()返回的ID值);

2.setInterval定义

setInterval()
方法可比照钦命的周期(以微秒计)来调用函数或总括表明式。

setInterval()
方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由
setInterval() 重临的 ID 值可用作 clearInterval() 方法的参数。

返回值

二个能够传递给
Window.clearTimeout() 从而打消对 code 的周期性推行的值。

既然setTimeout是一个沙漏函数,那么就有2个一个函数来清理停车计时器,那大家就用到了clearTimeout函数。

clearTimeout(setTimeout()返回的ID值);

2.setInterval定义

setInterval()
方法可依照指定的周期(以皮秒计)来调用函数或总结表明式。

setInterval()
方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由
setInterval() 重回的 ID 值可用作 clearInterval() 方法的参数。

set提姆eout() 只实行 code 一回。假如要频仍调用,请使用 setInterval()
可能让 code 本身再度调用 set提姆eout()。

语法

语法

返回值

1个方可传递给 Window.clearTimeout() 从而撤废对 code 的周期性试行的值。

既然setTimeout是2个坚持计时器函数,那么就有一个一个函数来清理电磁照应计时器,那大家就用到了clearTimeout函数。

clearTimeout(setTimeout()返回的ID值);

2.setInterval定义

setInterval() 方法可遵从钦点的周期(以飞秒计)来调用函数或总括表明式。

setInterval() 方法会不停地调用函数,直到 clearInterval()
被调用或窗口被关门。由 setInterval() 再次来到的 ID 值可用作 clearInterval()
方法的参数。

setInterval(code,millisec[,”lang”]);

setInterval(code,millisec[,”lang”]);

语法

参数code必需。要调用的函数或要进行的代码串。

参数code必需。要调用的函数或要实践的代码串。

setInterval(code,millisec[,”lang”]);

millisec必须。周期性实行或调用 code 之间的光阴距离,以皮秒计

millisec必须。周期性实践或调用 code 之间的命宫间隔,以微秒计

参数code必需。要调用的函数或要进行的代码串。

返回值

贰个得以传递给
Window.clearInterval() 从而撤销对 code 的周期性奉行的值。

既然setTimeout是三个定时器函数,那么就有二个一个函数来清理反应计时器,这我们就用到了clearInterval()函数。

clearInterval()(setInterval()返回的ID值);

eg.

1.倒计时的效益

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>倒计时效果</title>
    <script type="text/ecmascript">
        //使用js方式实现倒计时效果
        var t1;
        window.onload = function () {

            //01定位到开始按钮返回一个dom对象
            var btns = document.getElementById('btnStart');
            //02.给开始按钮注册单击事件
            btns.onclick = function () {
                //执行ssetInerval函数第一个参数要定时执行的函数,第二个参数该函数每个多少毫秒执行一次
                t1= setInterval(start, 1000);

            }
            //03定位到停止按钮返回一个dom对象
            var btnst = document.getElementById('btnStop');
            btnst.onclick = function () {
               clearInterval(t1);
            }
        }
       //要隔1秒执行的函数
        function start() {
            //01.获取div中的文本赋值给一个变量
            var divdom = document.getElementById('msg');
            var divnum = divdom.innerText;
            //判断divnum的值是否为0
            if (divnum > 0) {
                divnum--;
                //把减过的值重新赋值给divnum
                divdom.innerText = divnum;
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnStart" value="开始"  />
    <input type="button" id="btnStop"  value="停止" /><br />
    <div id="msg">10</div>

</body>
</html>

 

二.图形的切换

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        var count = 1;//定义初始变量默认为第一张图片
        window.onload = function () {
           //使用定时器函数每隔一秒定义执行一次show函数
            setInterval(show,1000);
        }
        //要执行的函数
        function show() {
            //如果图片到达最后一张(5张),就将下一张显示的图片改为第一张,如果没有到达最后一张就将显示下一张图片
            if (count > 5) {
                count = 1;
            }
            else {
                count++;
            }
            //获取id为myimg的dom对象
            var dom = document.getElementById("myimg");
            //改变img标签的src属性指向,改变图片
            dom.src = "image/"+count+".jpg"
        }

    </script>
</head>
<body>
    <img src="image/1.jpg" alt="Alternate Text" width="200px" height="200px" id="myimg" />
</body>
</html>

 

 

返回值

3个能够传递给
Window.clearInterval() 从而打消对 code 的周期性实践的值。

既然setTimeout是二个放大计时器函数,那么就有二个3个函数来清理反应计时器,那咱们就用到了clearInterval()函数。

clearInterval()(setInterval()返回的ID值);

eg.

1.倒计时的功力

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>倒计时效果</title>
    <script type="text/ecmascript">
        //使用js方式实现倒计时效果
        var t1;
        window.onload = function () {

            //01定位到开始按钮返回一个dom对象
            var btns = document.getElementById('btnStart');
            //02.给开始按钮注册单击事件
            btns.onclick = function () {
                //执行ssetInerval函数第一个参数要定时执行的函数,第二个参数该函数每个多少毫秒执行一次
                t1= setInterval(start, 1000);

            }
            //03定位到停止按钮返回一个dom对象
            var btnst = document.getElementById('btnStop');
            btnst.onclick = function () {
               clearInterval(t1);
            }
        }
       //要隔1秒执行的函数
        function start() {
            //01.获取div中的文本赋值给一个变量
            var divdom = document.getElementById('msg');
            var divnum = divdom.innerText;
            //判断divnum的值是否为0
            if (divnum > 0) {
                divnum--;
                //把减过的值重新赋值给divnum
                divdom.innerText = divnum;
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btnStart" value="开始"  />
    <input type="button" id="btnStop"  value="停止" /><br />
    <div id="msg">10</div>

</body>
</html>

 

二.图纸的切换

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        var count = 1;//定义初始变量默认为第一张图片
        window.onload = function () {
           //使用定时器函数每隔一秒定义执行一次show函数
            setInterval(show,1000);
        }
        //要执行的函数
        function show() {
            //如果图片到达最后一张(5张),就将下一张显示的图片改为第一张,如果没有到达最后一张就将显示下一张图片
            if (count > 5) {
                count = 1;
            }
            else {
                count++;
            }
            //获取id为myimg的dom对象
            var dom = document.getElementById("myimg");
            //改变img标签的src属性指向,改变图片
            dom.src = "image/"+count+".jpg"
        }

    </script>
</head>
<body>
    <img src="image/1.jpg" alt="Alternate Text" width="200px" height="200px" id="myimg" />
</body>
</html>

 

 

millisec必须。周期性实践或调用 code 之间的日子距离,以微秒计

返回值

一个足以传递给 Window.clearInterval() 从而撤除对 code 的周期性推行的值。

既然setTimeout是三个机械漏刻函数,那么就有八个一个函数来清理电磁关照计时器,那大家就用到了clearInterval()函数。

clearInterval()(setInterval()返回的ID值);

 

上面呢笔者给我们

二 案例

一.背景图片切换

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>图片轮播</title>    <script type="text/javascript">
        //定义初始变量默认为第一张图片
        var num = 1;
        //要执行的函数
        function myfunction() {
            //判断如果没有到达最后一张就将显示下一张图片,如果图片到达最后一张(5张),就将下一张显示的图片改为第一张
            if (num < 5) {
                num++;
            } else {
                num = 1;
            }
            //获取id为myimg的dom对象
            var dom = document.getElementById("myimg");
            //改变img标签的src属性指向,改变图片
            dom.src = 'images/' + num + '.jpg';
        }
        //使用定时器函数每隔一秒定义执行一次myfunction函数
        setInterval(myfunction, 1000);

    </script>
</head>
<body>
    <img src="images/1.jpg" width="960px" height="540px" id="myimg" />
</body>
</html>

2.计时器

<!DO
CTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        //去除变量的值
        window.onload = function () {
            var t;
            //锁定开始按钮
            var btnStart = document.getElementById("btnStart");
            //锁定开始按钮
            var btnStop = document.getElementById("btnStop");
            //给开始按钮注册单击事件
            btnStop.onclick = function () {
                clearInterval(t);
            }
            //给开始按钮注册单击事件
            btnStart.onclick = function () {
                //执行ssetInerval函数第一个参数要定时执行的函数,第二个参数该函数每个多少毫秒执行一次
                t = setInterval(myfunction, 1000);
            }
        }
        function myfunction() {
            //获取div中的文本赋值给一个变量
            var dom = document.getElementById("msg");
            var num = dom.innerText;
            //判断num的值是否为0
            if (num>0) {
                num--;
            }
            dom.innerText = num;
        }
    </script>
</head>
<body>
    <input type="button" id="btnStart" value="开始"/>
    <input type="button" id="btnStop" value="停止" />
    <div id="msg">10</div>
</body>
</html>

开卷过上述代码,我们应该对setTimeout函数和setInterval函数有了一些理解吧.

多谢我们阅读,喜欢的,不希罕的都点个关爱吧!

本身一向在成人

Leave a Comment.