JavaScriptタイマーのよくある使用例の分析


本論文の実例は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、タイマーでカウントダウンを作成する

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('div1');
    function timeleft(){
      var now = new Date();
      var future = new Date(2016,8,12,24,0,0);
      var lefts = parseInt((future-now)/1000);
      var day = parseInt(lefts/86400);
      var hour = parseInt(lefts%86400/3600);
      var min = parseInt(lefts%86400%3600/60);
      var sec = lefts%60;
      str = '  2016 9 12  24    '+day+' '+hour+' '+min+' '+sec+' ';
      oDiv.innerHTML = str; 
    }
    timeleft();
    setInterval(timeleft,1000);    
  }
</script>
......
<div id="div1"></div>

興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容に興味がある読者は、当駅のテーマを見ることができます。「JavaScript時間と日付操作技術のまとめ」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptエラーとデバッグテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScript数学演算の使い方のまとめ
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。