一、根據(jù)字符返回位置

跟charAt() 相反根據(jù)位置返回字符
indexOf(“字符”);找不到返回-1，索引號從0開始 。
lastIndexOf(參數(shù)：索引字符串) 從后面開始找，返回的值是從前往后數(shù)的。

二、網(wǎng)址編碼

一個網(wǎng)址有自己的網(wǎng)址， 不同頁面都有自己id網(wǎng)址， 我們把網(wǎng)址送入到后臺，但是后臺再處理的時候不認(rèn)識比如換行等特殊符號的 ？ 所以我們要實現(xiàn)編碼，然后再傳到后臺。

• encodeURIComponent() 函數(shù)可把字符串作為 URI 組件進(jìn)行編碼
  decodeURIComponent() 函數(shù)可把字符串作為 URI 組件進(jìn)行解碼

var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url));  // 編碼
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl));  // 解碼

三、操作字符串

1. 合并字符串
   concat()

  <script type="text/javascript">
        window.onload = function () {
            function $(id){return document.getElementById(id).innerHTML;}
            function ctt(id,txt){
                document.getElementById(id).onclick = function(){
                   this.nextSibling.innerHTML = txt; //忽略了要加的文字要放在btn的兄弟節(jié)點span中
                }
            }
            ctt("btn",$("div1").concat($("div2")));//error：btn是上面的id 要加引號、函數(shù)名打錯了
}

2. 取字符串

• slice()
  slice(取字符串的起始位置, [結(jié)束位置]) ; []是可選的,起始位置一定要有，結(jié)束位置可以省略。
  var txt = “abcedfgh ”; txt.slice(3) ; edfgh
  從 txt 里面字符的 第 3（索引號）個開始取，結(jié)束位置省略，一直取到最后一個。
  slice(3,6) edf
  從 第3個開始取，取到第6索引號的位置，還是從左邊的第0個開始數(shù)。但是不包括6，取到第6號的意思！
  slice（-1） f
  起始位置可以是負(fù)數(shù)，意思是從右往左開始取第一個。
• substr()
  substr(起始位置,[取的個數(shù)]) 同上。
  不寫取的個數(shù): 默認(rèn)從起始位置一直取到最后 。
  取的個數(shù)：是指從起始位置開始，往后面數(shù)幾個。

var txt = “abcdefghijk”;
txt.substr(3,4);   //defg

從第3個（d） 開始取4個數(shù)。
substr(-1) 少用，ie678會報錯。

兼容性的寫法 ：
onBtnClick("btn",div1.substr(div1.length-1,1)); // 兼容的寫法，取最后一個

• substring()
  和slice一樣的，但是有一點不同
  substring(3,6)
  substring 始終會把小的值作為起始位置,大的值作為結(jié)束位置。
  例如： substring(6,3) 實際中 自動變成 substring(3,6);

四、保留小數(shù)位數(shù)

122340.12345 保留兩位有效小數(shù) 122340.12 | substr(0, .+3)

1. console.log(str.substr(0,str.indexOf(".")+3));
   通過 indexOf返回小數(shù)點的位置，再截取字符（要轉(zhuǎn)換為字符串，數(shù)字不能進(jìn)行比較）
2. var PI = 123.123456 ;console.log(parseInt(PI*100) /100);
   先乘以100取整,再除以100 （如果是三位就變成1000）
3. console.log(PI.toFixed(2));
   保留 2位 小數(shù)

• 得到上傳文件格式小實例

   <script type="text/javascript">
       window.onload = function () {
           var file = document.getElementById("file");
           file.onchange = function(){
               var path = this.value;
               var typ = path.substr(path.lastIndexOf("."));
               alert(typ);
           }
           //error：先獲取當(dāng)前文件的路徑，通過路徑索引substr方法和文件后綴！
}
   </script>

• 大小寫轉(zhuǎn)換

1. toUpperCase，轉(zhuǎn)換為大寫（參數(shù)： 無）
2. toLowerCase，轉(zhuǎn)換為小寫（參數(shù)：無）
   asdf.toUpperCase() 結(jié)果就是： ASDF
   $("txt").value.toUpperCase();
substr(path.lastIndexOf(".")).toUpperCase();

五、無縫滾動

思路：一開始顯示兩張圖，那么就先滾動所有圖之后再加上開始兩張圖在最后，滾動結(jié)束left的值回到開始，但是前面的滾動結(jié)束也是顯示前兩張。

           var scroll = document.getElementById("scroll");
           var ul = scroll.children[0];//獲取第一個孩子ul
           var num = 0;
           var timer = null;
           timer = setInterval(gun,20);  
           function gun(){
               num--;
               num<=-1200?num = 0:num; //如果超過了四張圖的寬度就回到前兩張
               ul.style.left = num +"px"; 
           }
           scroll.onmouseover = function(){
               clearInterval(timer);
           }
            scroll.onmouseout = function(){
               timer = setInterval(gun,20);
        //使定時器的速度從頭開始,上一個定時器timer已經(jīng)被清了，
          如果不用timer = ，沒名字再放上鼠標(biāo)還是清不掉
           }

六、勻速運(yùn)動

var btn = document.getElementById('btn');
           var box = document.getElementById('box');
           var num = 0;
           btn.onclick  = function(){        
               var timer = null;
               timer = setInterval(function(){
                   num++;
                   if(num>=500){
                       clearInterval(timer);
                   }
                   else {
                       box.style.left = num+"px";
                   }
               },50)
           } 

七、緩動動畫

• 等差數(shù)列
  一個盒子初始值是0，要走到 400px的位置
  leader 0 target 400
  box.style.left = xxxx + “px”
  leader = leader + (target - leader ) /10 ;可以實現(xiàn)減速效果

八、焦點圖和左右輪播圖（需要緩動動畫）

鼠標(biāo)滑過序號出現(xiàn)圖片的輪播圖：
獲取每個圓點的索引值，鼠標(biāo)滑過類名變?yōu)楫?dāng)前（修改圓點樣式），target值變成當(dāng)前索引值*寬度。

        var dd = document.getElementById("dd");
          var ul = dd.children[0].children[0];
          var ol  = dd.children[1];
          var lis  = ol.children;
          var  leader = 0,target = 0;
          for(var i = 0 ;i <lis.length; i++) {
              lis[i].index = i;
              lis[i].onmouseover = function(){
                  for(var j= 0; j <lis.length;j++){
                      lis[j].className = "";
                  }
                  this.className="current";
                  target = -this.index *490;
              }
          }
          
          setInterval(function(){
              leader = leader + (target - leader) / 10;
              ul.style.left = leader+"px";
          },30);

左右輪播圖，左右箭頭，鼠標(biāo)滑過顯示，滑出隱藏。
點擊left向左移動一個寬度，<=0時設(shè)置=0；防止左邊溢出，>=四個寬度時 =四個寬度，防止右邊溢出。

          function $(id){
              return document.getElementById(id);
          }
          $("dd").onmouseover = function(){
              $("jiantou").style.display = "block";
          }
          $("dd").onmouseout = function(){
              $("jiantou").style.display = "none";
          }    
          $("right").onclick = function(){
              target -= 520; 
          }
           $("left").onclick = function(){
              target += 520; 
          }
          var leader=0,target = 0;
          setInterval(function(){
              if (target>=0) {
                  target = 0;
              }
              else if(target<=-2080){
                  target=-2080;
              }
              leader = leader + (target - leader) / 10;
              $("imgs").style.left = leader+"px";
          },30);