整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript定時器

          時器

          定時器在javascript中的作用

          1、制作動畫

          2、異步操作

          3、函數緩沖與節流

          定時器類型及語法

          /*
           定時器:
           setTimeout 只執行一次的定時器 
           clearTimeout 關閉只執行一次的定時器
           setInterval 反復執行的定時器
           clearInterval 關閉反復執行的定時器
          */
          var time1 = setTimeout(myalert,2000);
          var time2 = setInterval(myalert,2000);
          /*
          clearTimeout(time1);
          clearInterval(time2);
          */
          function myalert(){
           alert('ok!');
          }
          

          課堂練習

          1、定時器制作移動動畫

          2、定時器制作無縫滾動

          3、定時器制作時鐘

          <script type="text/javascript">
           window.onload = function(){ 
           var oDiv = document.getElementById('div1');
           function timego(){
           var now = new Date();
           var year = now.getFullYear();
           var month = now.getMonth()+1;
           var date = now.getDate();
           var week = now.getDay();
           var hour = now.getHours();
           var minute = now.getMinutes();
           var second = now.getSeconds();
           var str = '當前時間是:'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
           oDiv.innerHTML = str;
           }
           timego();
           setInterval(timego,1000);
           }
           function toweek(n){
           if(n==0)
           {
           return '星期日';
           }
           else if(n==1)
           {
           return '星期一';
           }
           else if(n==2)
           {
           return '星期二';
           }
           else if(n==3)
           {
           return '星期三';
           }
           else if(n==4)
           {
           return '星期四';
           }
           else if(n==5)
           {
           return '星期五';
           }
           else
           {
           return '星期六';
           }
           }
           function todou(n){
           if(n<10)
           {
           return '0'+n;
           }
           else
           {
           return n;
           }
           }
          </script>
          ......
          <div id="div1"></div>
          

          4、定時器制作倒計時

          時器類型及語法

          • setTimeout 只執行一次的定時器
          • clearTimeout 關閉執行一次的定時器
          • setInterval 反復執行的定時器
          • clearInterval 關閉反復執行的定時器

          簡單用法:

          //定時器調用函數,并給定時器命名
          var time1 = setTimeout(myalert,2000); 
          var time2 = setInterval(myalert,2000);
          //停止指定定時器
          clearTimeout(time1);
          clearInterval(time2);
          function myalert(){
           alert('ok!');
          }
          //簡寫(匿名函數代替即可)
          var time1 = setTimeout(
           function(){
           alert('ok!');
           },2000);
          

          實用的例子:

          1、 動態顯示當前時間

          效果圖:

          篇語:發現自己隨手記下的《阿里云ECS上手動安裝LAMP環境過程詳解(純手打)》文章挺受歡迎的,十分高興可以與大家一起分享知識、分享成長,遂決定把自己在學習路上的一些體會和感悟堅持記錄下來,給自己一個復習和回憶的地方,也和大家一次分享學習的點點滴滴。朋友們,如果你正在學習編程或有意向學習編程,請記得這位過來人(當然是我)總結的一句話:永遠不要把時間浪費在爭論什么語言有前途,什么工具好用、怎樣快速成手等等無意義的問題上,有時間多敲幾行代碼,你就能看見你的進步。


          進入主題——javascript之定時器的使用(說的不對或不到的歡迎大蝦不吝賜教,不勝感激)

          1、關于定時器

          javascript中的定時器有兩個:setInterval和setTimeout。


          2、基礎知識

          設定延時:setTimeout("function",time) 設置一個超時對象

          setInterval("function",time) 設置一個超時對象

          兩者的區別在于setInterval設置后可以自動重復執行,setTimeout執行一次就結束(通常運用在延遲一段時間再進行其他操作)。

          停止延時:clearTimeout(對象) 清除已設置的setTimeout對象

          clearInterval(對象) 清除已設置的setInterval對象


          3、基礎用法示例

          (1)頁面每隔2秒彈出一個提示框。因為需要重復彈出,所以選擇setInterval(),代碼如下:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>定時器的使用</title>

          <script>

          window.onload = function()

          {

          function show() {

          alert("定時器的使用");

          }

          setInterval(show, 2000);

          };

          </script>

          </head>

          <body>

          </body>

          </html>

          (2)頁面打開5秒后彈出提示框(只彈出一次)

          因為延時后只彈出一次,所以選擇setTimeout()。相信大家應該都知道怎么做了,修改上述代碼的setInterval(),改為setTimeout(show, 5000);即可,趕緊試試吧。

          (3)注意事項,依舊用例子表示,只修改script中的內容。

          //該函數不需要參數

          function show(){ alert("定時器的使用");}

          // 每隔5秒鐘就彈出提示信息"定時器的使用",第一個參數是show,而不是show(),切記。

          setInterval(show, 5000);

          // 使用匿名函數作為參數,每隔5秒鐘就彈出信息。

          setTimeout(function(){ alert("定時器的使用"); }, 5000);

          // 該函數需要兩個參數

          function sayHello(name, age){ alert("我叫" + name + ",今年" + age + "歲!");}

          //每隔5秒鐘就彈出提示信息"我叫CodePlayer,今年18歲!"。

          setInterval(sayHello, 5000, "CodePlayer", 18);


          今天工作太忙,寫的有些倉促,望見諒。明天用定時器實現兩個例子:頁面上顯示動態時間和圖片無縫滾動,歡迎大家關注。


          主站蜘蛛池模板: 岛国无码av不卡一区二区| 中文字幕乱码亚洲精品一区| 久久伊人精品一区二区三区| 亚洲av高清在线观看一区二区 | 中文字幕一区二区三区精华液 | 久久毛片一区二区| 高清精品一区二区三区一区| 韩国福利视频一区二区| 成人毛片无码一区二区| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 波多野结衣一区二区三区高清在线 | 亚洲熟女综合色一区二区三区| 51视频国产精品一区二区| 一区二区三区电影在线观看| 亚洲日本一区二区| 精品国产日韩亚洲一区| 亚洲一区二区三区写真| 日韩国产一区二区| 色婷婷av一区二区三区仙踪林| 一区视频免费观看| 国产精品成人一区二区| 久久综合亚洲色一区二区三区| 福利国产微拍广场一区视频在线 | 国产凹凸在线一区二区| 亚洲AV噜噜一区二区三区| 亚洲毛片αv无线播放一区| 国产精品久久久久一区二区三区 | 精品一区二区三区四区电影 | 麻豆视频一区二区三区| 99精品国产高清一区二区| 国产探花在线精品一区二区| 国产成人精品无人区一区| 国产成人无码aa精品一区| 鲁丝丝国产一区二区| 成人精品一区二区激情| 国产精品一区二区电影| 日韩在线观看一区二区三区| 精品一区二区三人妻视频| 亚洲一区精品中文字幕| 亚洲av无码一区二区三区天堂古代 | 视频在线观看一区二区三区|