JS一起学05：Date对象、封闭空间、函数传参和封装、获取非行间样式、字符串操作

一、Date对象

1. 获取

oDate.getFullYear() 获取年份

oDate.getMonth()+1  获取月份 0-11----->1-12

oDate.getDate() 获取日 1－31

      var arr=['日','一','二','三','四','五','六'];

      var oDate=new Date();  

oDate.getHours() 获取小时    oDate.getMinutes() 获取分    oDate.getSeconds() 秒

    alert(oDate.getMillisecons());   //毫秒

oDate.getDay() 获取星期几 0－6     0：星期天

例：数码时钟

    (1)获取系统时间----Date 对象----getHours、getMinutes、getSeconds

    (2)  显示系统时间----字符串连接、空位补零

    (3) 字符串[下标]获取一个字符，不兼容IE6/7，所以，设置图片路径。charAt方法----字符串.charAt(下标)兼容

2. 时间戳

oDate.getTime()----从1970年1月1日到现在的毫秒数

            61秒＝ parseInt61/60 分 61%60 秒

3. 设置

    （1）setFullYear(年，月，日 ) 年：必填 月日：可选-----获取完整的年份

            setYear(); 获取年

    （2）setMonth(月，日) 月：必填

    （3）setDate(日)

                oDate.setDate(31);  //如果本月只有30天，会直接到下月第一天

                oDate.setDate(0);  上个月最后一天

                oDate.setDate(30);

                alert(oDate.getDay());

本月最后一天星期几

oDate.setMonth(oDate.getMonth()+1); //设置下个月1号

// 因为本月是11月，getMonth()获取到的是10，所以要获取到11才是下个月

oDate.setDate(0);

alert(oDate.getDay());

    （4）setHours(小时，分，秒，毫秒) 后面三个可选

例子：本月第一天是周几，本月共有多少天

var oDate=new Date();

oDate.setDate(1);

var week=oDate.getDay();

alert('本月第一天是周'+week);

oDate.setMonth(oDate.getMonth()+1);

oDate.setDate(0);

var day=oDate.getDate();

alert('本月的总天数是：'+day);

 

例：倒计时

window.onload=function(){

    var oSpan=document.getElementsByTagName('span')[0];

    tick();

    setInterval(tick,1000);

    function tick(){

        var oDate=new Date();   

        var oDateTarget=new Date();

        oDateTarget.setFullYear(2014,11,1);   //注意此处月份应设置比目标小1

        oDateTarget.setHours(0,0,0,0);

        var s=parseInt((oDateTarget.getTime()-oDate.getTime())/1000);

        var d=parseInt(s/86400);

        s%=86400;

        var H=parseInt(s/3600);

        s%=3600;

        var M=parseInt(s/60);

        s%=60;

        oSpan.innerHTML="距离2014年12月1日"+d+"天"+H+"时"+M+"分"+s+"秒";

    }

}

date对象的另外的用法-----设置时间可以进位、退位

二、封闭空间

1. 定时器中的括号问题：

setInterval(show,1000);    //此处的show不能加括号，如果加则变成立刻执行，执行完之后，返回undefined

function show(){

    alert(1);

}

js中语法规范：大括号不能直接跟小括号，如下：

function show(){

    alert(1);

}()

但是，如果这样即可：

(function (){

    alert(1);

})()    /相当于立刻执行这个函数。如果后面再加show(); 则会报错

函数每调用一次，就复制一份，就执行一次

2. 封闭空间：多人配合时，避免函数重名问题

    (fn1)();  //立即执行的匿名函数

例一：两个局部变量a不会重名，在两个不同的作用域下

function fn1(){

    var a=44;

    alert(a);

}

fuction fn2(){

    var a=55;

    alert(a);

}

例二：

(function(){

    var a=55;

    alert(a);

})();   //立即执行的匿名函数   封闭空间    这个函数只能用一次

例三：

var a=12;

function aaa(){

 a=5;

}

aaa();

alert(a);

(function bbb(){

 a=34;

})();

alert(a);     //先后弹出5、34

利用封闭空间写选项卡

var oBox=document.getElementById('box');

var aBtn=oBox.getElementsByTagName('input');

var aDiv=oBox.getElementsByTagName('div');

for(var i=0;i<aBtn.length;i++){

    (function(index){

        aBtn[i].onclick=function() { 

            for(var i=0;i<aDiv.length;i++) { 

                 aBtn[i].className='';

                 aDiv[i].className='';

            };

            this.className='active';

            aDiv[index].className='active';

       }; 

    })(i);

}

//function fn(index){ };

    fn(i);

同(function(index){ })(i);

利用封闭空间写选项卡----封装

var oBox=document.getElementById('box');

var aBtn=oBox.getElementsByTagName('input');

var aDiv=oBox.getElementsByTagName('div');

tab(0);

tab(1);

tab(2);

function tab(index){

        aBtn[i].onclick=function() { 

            for(var i=0;i<aDiv.length;i++) { 

                 aBtn[i].className='';

                 aDiv[i].className='';

            };

            this.className='active';

            aDiv[index].className='active';

       }; 

    }

求和函数：

（1）参数数量不固定的时候可用

（2）参数数组不是一个真正的数组，所以它不能用数组的方法

window.onload=function(){

    function fn(){

        var num=0;

        for(var i=0;i<arguments.length;i++){

            num+=arguments[i];

        }

    }

    fn(222,33,456);

}

三、函数传参和封装

1.参数的基本知识：

    (1)参数可以省 可以不传

    (2)在调用函数的括号里传 在定义函数的括号里收

    (3)参数名可以自定义 不用带引号

    (4)可以传多个参数 中间用逗号分隔 

    (5)可以传多类型

2. 可变参（不定参）：arguments

        参数的个数可变，参数数组。参数数组，  有下标，有length,但并不是真正的数组，所以它不能用数组的方法。

3. 例1：求和-----求所有参数的和(用arguments)

例子：

        function sum(){

                //alert(arguments.length);

                for(var i=0; i<arguments.length; i++){

                    result=0;

                    result+=arguments[i];

                }

                return result;

        }

        alert(sum(12,6,8));

4. 例2：CSS函数

         (1)判断arguments.length

         (2)给参数取名，增强可读性

 四、获取非行间样式（不能用来设置）：

    （1）obj.currentStyle[attr]-----IE浏览器支持

     （2）getComputedStyle(obj,false)[attr]------Chrome、fire fox、IE9、IE10

            ···false处，可以随便放任何值，如果不放则不兼容firefox低版本。如果不写第二个参数，不兼容firefox低版本；放false显得专业而已

        只能取单一样式，不能取复合样式

        获取样式：css(oDiv,'width')

        设置样式：css(oDiv,'width','200px')

例一：获取样式封装

window.onload=function(){

    var oBox=document.getElementById('box');

    oBox.onclick=function(){

        var w=parseInt(getStyle(this,'width'));

        this.style.width=w+100+'px';

        var oSpanH=getStyle(document.getElementById('s1'),'height');

    }

}

function getStyle(obj,attr){

    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];   //var 和 return 必须写在行首

}

例二：函数封装和随机数配合使用

window.onload=function(){

    var oBox=document.getElementById('box');

    oBox.onclick=function(){

        var w=parseInt(getStyle(oBox,'width'));

        var r=rnd(10,100);

        w+=r;

        oBox.style.width=w+'px';

    }

}

function rnd(n,m){

    return parseInt(Math.random()*(m-n+1)+n);

}

例三：卷起广告

window.onload=function(){

     var oBox=document.getElementById('box');

     function fn(){

          var timer=setInterval(function(){

              var h=parseInt(getStyle(oBox,'height'))-10;

              if(h<=0){

                    clearInterval(timer);

                    oBox.style.display='none';

             }

             oBox.style.height=h+'px';

            },30)

      }

      setTimeout(fn,3000);

}

function getStyle(obj,attr){

     if(obj.currentStyle){

         return obj.currentStyle[attr];

     }else{

          return getComputedStyle(obj,false)[attr];

     }

}

五、字符串操作

1、截取字符串

   (1) str.charAt(0)通过下标获取字符串第几位   兼容

                str.substring(1)只传一个参数。从开始到最后

   (2) str.substring(1,3)截取字符串【alert(name.ssubstring(name.lastIndexOf('.')+1));】

                两参数：第一个是开始，第二个是结束位置  但不包括结束位置

     str.substring(n);  截取字符串，从参数n开始到最后

2.  indexOf();

indexOf()   查找字符串，返回下标，无论是输入两个还是输入词组，都只找第一个字符的下标；如果没有，则返回-1；

  应用：浏览器独有的信息

window.navigator.userAgent;    找不到返回-1

if(copy.indexOf('MSIE 6.0')==-1){alert('不是IE6');}

var win=window.navigator.userAgent;   //返回字符串

判断浏览器信息：

var win=window.navigator.userAgent.toLowerCase();

if(win.indexOf('Chrome')!=-1){

     alert('chrome');

} else if(win.indexOf('Firefox')!=-1){ 

     alert('f');

} else if(win.indexOf('MSIE')){ 

     alert('ie');

} else{ 

 alert('其它');

}

例一：

function findSame(arr,n){

    if(arr.indexOf){

        return arr.indexOf(n);

    }

    for(var i=0;i<arr.length;i++){

        if(arr[i]==n){

            return i;    

        }

    }

    return -1;

}

3. lastIndexOf();

从后面开始找，但同样返回下标 。 跟indexOf相反，是从后面开始找的，找不到也返回-1

应用：找一个字符串的文件扩展名

var string='a.b.cd.efg.c.d.fffd.png';

alert(string.substring(str.lastIndexOf('.')+1));

4. 字符串拆分成数组---split( )

5. 把英文字母转成大写/小写---toUpperCase()/toLowerCase();

alert(win.toUpperCase());

alert(win.toLowerCase());

var win=window.navigator.userAgent.toLowerCase();

5. 字符串排序

英文：按照字典序              alert('f'<'g'); ---->true

字符串数字：按照字典序   alert('624'>'53')-->true   先比较左侧第一位

中文：乱