前端基本功--js实战7 11.09

一、根据字符返回位置

跟charAt() 相反根据位置返回字符
indexOf(“字符”);找不到返回-1，索引号从0开始。
lastIndexOf(参数：索引字符串) 从后面开始找，返回的值是从前往后数的。

二、网址编码

一个网址有自己的网址，不同页面都有自己id网址，我们把网址送入到后台，但是后台再处理的时候不认识比如换行等特殊符号的？所以我们要实现编码，然后再传到后台。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

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

三、操作字符串

合并字符串
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的兄弟节点span中
                }
            }
            ctt("btn",$("div1").concat($("div2")));//error：btn是上面的id 要加引号、函数名打错了
}

取字符串

slice()
slice(取字符串的起始位置, [结束位置]) ; []是可选的,起始位置一定要有，结束位置可以省略。
var txt = “abcedfgh ”; txt.slice(3) ; edfgh
从 txt 里面字符的第 3（索引号）个开始取，结束位置省略，一直取到最后一个。
slice(3,6) edf
从第3个开始取，取到第6索引号的位置，还是从左边的第0个开始数。但是不包括6，取到第6号的意思！
slice（-1） f
起始位置可以是负数，意思是从右往左开始取第一个。
substr()
substr(起始位置,[取的个数]) 同上。
不写取的个数: 默认从起始位置一直取到最后。
取的个数：是指从起始位置开始，往后面数几个。

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

从第3个（d）开始取4个数。
substr(-1) 少用，ie678会报错。

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

substring()
和slice一样的，但是有一点不同
substring(3,6)
substring 始终会把小的值作为起始位置,大的值作为结束位置。
例如： substring(6,3) 实际中自动变成 substring(3,6);

四、保留小数位数

122340.12345 保留两位有效小数 122340.12 | substr(0, .+3)

console.log(str.substr(0,str.indexOf(".")+3));
通过 indexOf返回小数点的位置，再截取字符（要转换为字符串，数字不能进行比较）
var PI = 123.123456 ;console.log(parseInt(PI*100) /100);
先乘以100取整,再除以100 （如果是三位就变成1000）
console.log(PI.toFixed(2));
保留 2位小数

得到上传文件格式小实例

   <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：先获取当前文件的路径，通过路径索引substr方法和文件后缀！
}
   </script>

大小写转换

toUpperCase，转换为大写（参数：无）
toLowerCase，转换为小写（参数：无）
asdf.toUpperCase() 结果就是： ASDF
$("txt").value.toUpperCase();
substr(path.lastIndexOf(".")).toUpperCase();

五、无缝滚动

思路：一开始显示两张图，那么就先滚动所有图之后再加上开始两张图在最后，滚动结束left的值回到开始，但是前面的滚动结束也是显示前两张。

           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已经被清了，
          如果不用timer = ，没名字再放上鼠标还是清不掉
           }

六、匀速运动

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

七、缓动动画

等差数列
一个盒子初始值是0，要走到 400px的位置
leader 0 target 400
box.style.left = xxxx + “px”
leader = leader + (target - leader ) /10 ;可以实现减速效果

八、焦点图和左右轮播图（需要缓动动画）

鼠标滑过序号出现图片的轮播图：
获取每个圆点的索引值，鼠标滑过类名变为当前（修改圆点样式），target值变成当前索引值*宽度。

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

左右轮播图，左右箭头，鼠标滑过显示，滑出隐藏。
点击left向左移动一个宽度，<=0时设置=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);