js基本知识5

1.1    复习
1. 按钮不可用    disabled =  “disabled”  ||  true  
2. setTimeout   只执行一次    setInterval  执行很多次  
3.  递归调用 ：  函数自己调用自己  函数递归调用    不提倡用函数名 而喜欢用的是  arguments.callee    返回的是  正在执行的函数 本身
4.  逻辑运算符   与  &&  或  ||   非  ！         ! > && > ||
5.  2&&0    0   1&&8         0&&3   0      1||0  
6.  转换为 字符型      
    var num = 12345;
    num+ “”
    String(num);  
    num.toString();   10进制 
    num.toString(2)   二进制    
7. 根据字符位置返回字符    
    charAt(索引号)
     var txt = “abcde”;
     txt.charAt(3);  d   
charCodeAt(3)   unicode  编码       97      100
1.2     根据字符返回位置
跟  charAt()   相反的   根据  字符 返回的是 位置 
1.2.1    返回前面起第一个字符的位置
  indexOf(“字符”);
它是从 前面开始数（从左边开始数）， 而且只找第一个， 然后返回改字符的位置， 索引号都是从0开始的。  返回的是个数值。
 var txt = “abcdef”;
 alert(txt.indexOf(“d”))      结果就是   3
如果找不到该字符   返回  -1   
1.2.2    返回后面起第一个字符的位置
lastIndexOf(参数：索引字符串)  
从后面开始数    同上  
var  txt = “abcdef” ;
txt.lastIndexOf(“d”);     3   
返回的值，还是从 左边开始 数的 索引号 。  
1.3    网址编码 
我们知道一个网址 自己的网址，   不同页面也有自己id网址， 我们经常会做一些， 把网址送入到后台。  但是后台再处理的 不认识比如 换行啊 等特殊符号的  ？  
var url =  “http://www.itast.cn?name=cz”  
所以我们要实现编码，然后再传到后台。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码
var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url));  // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl));  // 解码
结果： 
1.4    操作字符串
  合并字符串   取字符串  
1.4.1     concat() 连接字符串
var  txt1 = “abc”;
var txt2 = ”123”;
console.log(txt1.concat(txt2));     “abc123”; 
1.4.2    slice()  
 slice(“取字符串的起始位置”, [结束位置]) ;    []  可选的  
  起始位置一定要有  结束位置可以省略 
  var txt = “abcedf”;
  txt.slice(3) ;    从 txt 里面字符的 第 3（索引号）个开始取   结束位置省略， 一直取到最后一个。 
    总结  slice(3)  从第3个开始取，一直取到最后
   slice(3,6)     3 从 第3个开始 取     6  取到第6索引号的位置，还是从左边的第0个开始数。 但是不包 6 。
  起始位置可以是负数  ， 如果是负数，则是从 右边往左边开始取。
   var txt =”asdf”;
   txt.slice(-1)  结果是   f  
1.4.3     substr()
  substr(起始位置,[取的个数])  
  同上。  
  不写取的个数， 默认从起始位置一直取到最后 。
  取的个数：    是指从起始位置开始，往后面数几个。 
 var txt = “abcdefghijk”;
 txt.substr(3,4); 
  从第3个  （d） 开始 数 4个  defg 
   substr(-1)  少用   ie678 报错 。 尽量少用 
  兼容性的写法 ： 
   onBtnClick("btn7",div1.substr(div1.length-1,1));  // 兼容的写法
  substring 同slice  一样的   但是有一点不同 
  substring(3,6)     
  substring 始终会把  小的值作为  起始位置 大的值作为结束位置
  例如：  substring(6,3)   实际中   自动变成  substring(3,6); 
1.5    保留小数位数
 122340.12345      保留两位有效小数  122340.12  
  substr(0, .+3)
1.console.log(str.substr(0,str.indexOf(".")+3));
  通过 indexOf  返回小数点的位置     截取字符串  
2 console.log(parseInt(PI*100) /100);
      先乘以100  取整  然后 除以100  
 3 console.log(PI.toFixed(2));
pi.toFixed(2)  保留 2位 小数  
1.6    大小写转换
asdf   =  ASDF   
ASDF  --   asdf  
1 toUpperCase，转换为大写（参数： 无）
2 toLowerCase，转换为小写（参数：无）
asdf.toUpperCase()   结果就是：     ASDF
 $("txt").value.toUpperCase();
 把txt 的值 转换为大写  
1.7    无缝滚动
原理：
    首先先复制  两张图片 （第一张和第二张） 放到最后面  （本质上是第 5.6张）
     
ul 是盒子移动的，   如果ul 的left 值  大于等于  4张图片的宽度，就应该快速复原为0 。
完整代码：
1   <script>
2      var scroll = document.getElementById("scroll");
3      var ul = scroll.children[0];
4      var num = 0; //控制左侧值  left
5      var timer = null;  // 定时器
6      timer = setInterval(autoPlay,20);
7      function autoPlay() {
8          num--;
9          //console.log(num);
10          num<=-1200 ? num = 0 : num;
11          ul.style.left = num + "px";
12      }
13      scroll.onmouseover = function() {  // 鼠标经过大盒子  停止定时器
14          clearInterval(timer);
15      }
16      scroll.onmouseout = function() {  
17          timer = setInterval(autoPlay,20);  // 开启定时器
18      } 
19  </script>
1.8    缓动动画
 匀速动画，看起来，效果太简单。
等差序列   :    2  4  6  8  10  
 缓动动画公式:
    一个盒子初始值  是  0      要走到 400 px 的位置  
假如说，初始值   leader  0          target  400
  box.style.left =  xxxx +   “px”
  leader = leader + (target - leader ) /10 ;
    
1     btn.onclick = function() {
2          setInterval(function(){
3              leader = leader + (target - leader )/10;
4              box.style.left = leader + "px";
5          },30)
6      }