Javascrip 之 字串處理 & 定時器 & 型別轉換

Javascrip的組成

• 1、ECMAscript : javascript的語法（變數、函式、迴圈語句等語法）
• 2、DOM(文件物件模型) : 操作html和css的方法
• 3、BOM(瀏覽器物件模型) : 操作瀏覽器的一些方法

字串處理方法

• 1、字串合併操作：“ + ”
• 2、parseInt() 將數字字串轉化為整數
• 3、parseFloat() 將數字字串轉化為小數
• 4、split() 把一個字串分隔成字串組成的陣列
• 5、charAt() 獲取字串中的某一個字元
• 6、indexOf() 查詢字串是否含有某字元
• 7、substring() 擷取字串 用法： substring(start,end)（不包括end）
• 8、toUpperCase() 字串轉大寫
• 9、toLowerCase() 字串轉小寫

  var str = 'asdfj12jlsdkf098';
  var str2 = str.split('').reverse().join('');
  
  alert(str2);
  

除錯程式的方法

• 1、alert
• 2、console.log
• 3、document.title

定時器

• 定時器在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!');
}

• 定時器製作時鐘

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

• 定時器製作倒數計時

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

型別轉換

• 1、直接轉換 parseInt() 與 parseFloat()

  alert('12'+7); //彈出127
  alert( parseInt('12') + 7 );  //彈出19 
  alert( parseInt(5.6));  // 彈出5
  alert('5.6'+2.3);  // 彈出5.62.3
  alert(parseFloat('5.6')+2.3);  // 彈出7.8999999999999995
  alert(0.1+0.2); //彈出 0.3000000000000004
  alert((0.1*100+0.2*100)/100); //彈出0.3
  alert((parseFloat('5.6')*100+2.3*100)/100); //彈出7.9
  

• 2、隱式轉換 “==” 和 “-”

  if('3'==3)
  {
      alert('相等');
  }
  
  // 彈出'相等'
  alert('10'-3);  // 彈出7
  

• 3、NaN 和 isNaN

  alert( parseInt('123abc') );  // 彈出123
  alert( parseInt('abc123') );  // 彈出NaN