`
yumo12
  • 浏览: 18483 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • js
阅读更多
一、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   先比较左侧第一位
中文:乱
分享到:
评论

相关推荐

    javascript获取非行间样式的方法

    本篇文章主要探讨的是如何使用JavaScript获取非行间样式的值,这对于理解和优化网页样式操作至关重要。 首先,我们要明白CSS样式分为行内样式、内部样式(位于`&lt;style&gt;`标签内)和外部样式(引用的CSS文件)。行内...

    JavaScript兼容性总结之获取非行间样式案例

    在前端开发中,获取元素的非行间样式是一个常见的需求。所谓非行间样式,通常指的是通过CSS样式表或者通过内联样式属性以外的方式设置的样式。这些样式可能会被浏览器内部通过计算得到,或者是在页面加载后通过脚本...

    JS非行间样式获取函数的实例代码

    综上所述,本文详细讲解了JavaScript中获取非行间样式的两种方法以及如何封装成一个通用的函数,以便在不同浏览器中使用。这对于前端开发者来说非常有用,特别是在需要动态读取或改变页面上元素的样式时。需要注意的...

    js和jquery中获取非行间样式

    在JavaScript(JS)和jQuery中,获取非行间样式的方法有所不同。 在JavaScript中,获取非行间样式主要有以下两种方法: 1. `currentStyle`属性:在IE浏览器中,可以通过元素对象的`currentStyle`属性来获取元素的...

    取非行间样式2

    IE6与其他浏览器兼容,取非行间样式2: function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }

    js中最最常用的函数封装,方便调用

    在JavaScript编程中,函数封装是提高代码可读性、可维护性和重用性的关键实践。以下是一些在JS中常用且实用的函数封装方法: 1. **事件委托的封装**: ```javascript function eveEnt(child, cb) { return ...

    原生JS实现获取及修改CSS样式的方法

    本文将详细讲解如何使用原生JS来获取和修改CSS样式,包括行内样式、内部样式以及外部样式,同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如: ```html ...

    javaScript面试题

    9. **获取非行间样式** 可以编写一个函数,利用 `window.getComputedStyle` 或 `element.currentStyle`(IE特有)来获取元素的非行内样式。 10. **事件委托** 事件委托是一种优化事件处理的方法,通过在父元素上...

    2021-2022计算机二级等级考试试题及答案No.13583.docx

    9. 面向对象方法概念:面向对象方法的核心概念包括对象、消息、继承、多态和封装,过程调用是传统的程序设计概念,不属于面向对象。 10. Word视图:Word2000的状态栏中,从左到右依次是普通视图、Web版式视图、页面...

    老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    总结,JavaScript 获取 CSS 样式的方法涉及到行内样式和非行内样式。对于行内样式,直接通过`element.style.attr`获取或设置;对于非行内样式,需根据浏览器特性选择`element.currentStyle['attr']`或`...

    原生js封装运动框架的示例讲解

    - **`setStyle`函数**:用于获取元素的非行间样式值,兼容不同浏览器。 - **`move`函数**:封装了运动框架的核心逻辑。 - **步数计算**:`count`计算了整个动画需要多少步。 - **起始位置**:`start`变量获取了...

    js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法。分享给大家供大家参考。具体分析如下: 一般给元素设置行内样式,如”div1″ xss=removed&gt;。如要获取它的样式,即可document.getElementById(“div1”).style.width来获取...

    2021-2022计算机二级等级考试试题及答案No.11133.docx

    DTOC(DATE()) 返回日期时间的字符串表示;SUBSTR("ABCD",3,1) 也返回字符串类型。因此,这三个函数的返回值数据类型是一致的,均为字符串类型。 #### 4. 自动窗体向导的创建类型 - **知识点**: 在数据库管理软件...

    2021-2022计算机二级等级考试试题及答案No.16494.docx

    - **总结**:从字符串 S 中,第二个字符开始获取 4 个字符的子字符串,正确的函数是 `Mid$(S, 2, 4)`。 #### 16. Java Application 与 Applet 的区别 - **知识点**:Java Application 和 Applet 在执行方式上有显著...

Global site tag (gtag.js) - Google Analytics