javascript常用代码段搜集


Posted in Javascript onDecember 04, 2014

1.json转字符串

function json2str(o) {

    var arr = [];

    var fmt = function (s) {

        if (typeof s == 'object' && s != null) return json2str(s);

        return /^(string|number)$/.test(typeof s) ? "'" + s + "'" : s;

    };

    for (var i in o) arr.push("'" + i + "':" + fmt(o[i]));

    return '{' + arr.join(',') + '}';

}

2.时间戳转为Date

function fromUnixTime(timeStamp) {

    if (!timeStamp || timeStamp < 1000 || timeStamp == ' ') return "";

    var theDate = new Date(parseInt(timeStamp) * 1000);

    return theDate;

}

3.Data-format

// 作者: meizz  

// 对Date的扩展,将 Date 转化为指定格式的String   

// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,   

// 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   

// 例子:   

// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2012-12-02 08:12:04.423   

// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2012-12-02 8:12:4.18   

Date.prototype.Format = function(fmt) {  

    var o = {

        "M+": this.getMonth() + 1,                 //月份   

        "d+": this.getDate(),                    //日   

        "h+": this.getHours(),                   //小时   

        "m+": this.getMinutes(),                 //分   

        "s+": this.getSeconds(),                 //秒   

        "q+": Math.floor((this.getMonth() + 3) / 3), //季度   

        "S": this.getMilliseconds()             //毫秒   

    };

    if (/(y+)/.test(fmt))

        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

    for (var k in o)

        if (new RegExp("(" + k + ")").test(fmt))

            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

    return fmt;

};

4.日期上增加n天

function addDay(number) {

        return fromUnixTime(new Date().getTime() / 1000 + 24 * 60 * 60 * number);

}

5. 使用 iframe 时,父窗体与子窗体之间的相互调用

// 父窗体调用子窗体内的函数  

window.frames['ifm_id'].valueChange("id_101");  

// 子窗体调用父窗体的函数  

parent.refreshTree("nodeId_202"); 

6. 弹出窗体与返回值

// 弹出窗体  

var url = "http://www.baidu.com";  

win=window.showModalDialog(url,window,"dialogLeft:400;dialogTop:200;dialogWidth:560px;dialogHeight:380px;scroll:yes;menubar:no;toolbar:no;status:no;");  

// 在弹出窗体中设置返回值  

var result = new Array();  

result[0] = "id_101";  

result[1] = "name_202";  

window.returnValue = result;  

window.close(); 

7. javascript 作用域[只有全局作用域和函数作用域,javascript没有块作用域]

// 1. 全局作用域  

var id = "global variable";    // 1.1 在函数外部定义的变量  

function showMsg(){      

    message = "global message";// 1.2 未定义而直接赋值的变量  

                               //     在第一次使用时被定义为全局变量  

}  

// 2. 函数作用域  

function doCheck(){  

    var data = "function data";// 2.1 在函数内部定义的变量  

} 

8. javascript 继承机制

// 1. 对象冒充继承  

function Person(strName){  

    // private fields  

    var name = strName;  

    // public methods  

    this.getName = function(){  

        return name;  

    };      

}  

function Student(strName,strSchool){  

    // 定义父类的属性及方法      

    this.parent = Person;  

    this.parent(strName);  

    delete this.parent;        // 删除临时变量 parent  

    // 定义新属性及方法      

    // private fields  

    var school = strSchool;  

    // public methods  

    this.getSchool = function(){  

        return school;  

    };       

}  

// 2. Funtion 对象的 call(..) 或 apply(..) 继承  

//    call 和 apply 的区别在于:  

//      call  的第二个参数为可变参数;  

//      apply 的第二个参数为 Array;  

function Animal(strName,intAge){  

    // private fields  

    var name = strName;  

    var age = intAge;  

    // public methods  

    this.getName = function(){  

        return name;  

    };   

    this.getAge = function(){  

        return age;  

    };  

}  

function Cat(strName,intAge,strColor){  

    // 定义父类的属性及方法      

    Animal.call(this,strName,intAge);  

    // Animal.apply(this,new Array(strName,intAge));  

    // 定义新属性及方法      

    // private fields  

    var color = strColor;  

    // public methods  

    this.getInfo = function(){  

        return "name:" + this.getName() + "\n"  

             + "age:" + this.getAge() + "\n"  

             + "color:" + color;  

    };  

}  

// 3. prototype 继承  

//    prototype 声明的属性及方法被所有对象共享  

//    prototype 只有在读属性的时候会用到  

Function.prototype.extend = function(superClass){  

    // 此处的 F 是为了避免子类访问父类中的属性 this.xxx  

    function F(){};  

    F.prototype = superClass.prototype;  

    // 父类构造函数  

    this.superConstructor = superClass;  

    this.superClass = superClass.prototype;  

    this.prototype = new F();  

    this.prototype.constructor = this;  

};  

Function.prototype.mixin = function(props){      

    for (var p in props){          

        this.prototype[p] = props[p];          

    }  

};  

function Box(){}  

Box.prototype = {      

    getText : function(){  

        return this.text;  

    },  

    setText : function(text){  

        this.text = text;  

    }  

};  

function CheckBox(){}  

CheckBox.extend(Box);  

CheckBox.mixin({  

    isChecked : function(){  

        return this.checked;  

    },  

    setChecked : function(checked){  

        this.checked = checked;  

    }  

}); 

9. call , apply & bind

// thisArg 表示在 fun 内部时 this 所指示的对象  

// call & apply 将立即执行 fun 并返回结果  

var result = fun.call(thisArg,arg1,...);  

var result = fun.apply(thisArg,[argsArray]);  

// thisArg 表示在 fun 内部时 this 所指示的对象  

// bind 返回的是一个匿名函数  

var tmpfun = fun.bind(thisArg);  

var result = tmpfun(arg1,...); 
<script type="text/javascript">  

/** 

 * 扩展 Function 的功能 

 */  

Function.prototype.bind = function(obj){  

    var method = this;  

    var tmpfun = function(){  

        return method.apply(obj,arguments);  

    };  

    return tmpfun;  

}  

function Parent(){  

    this.name = "parent";  

}  

function Child(){  

    this.name = "child";  

    this.getName = function(time){  

        return time + " " + this.name;  

    };  

}  

var parent = new Parent();  

var child = new Child();  

alert(child.getName(1));                // show 1 child  

alert(child.getName.call(parent,2));    // show 2 parent [call & apply 会立即执行]  

var tmpfun = child.getName.bind(parent);// bind 不会立即执行  

alert(tmpfun(3));                       // show 3 parent  

</script> 

10. js "==" Operator

转换规则  

   如果一个操作数是 Boolean 值,则比较之前将其转成数字:false -> 0, true -> 1;  

   如果一个操作数是数字,另一操作数是字符串,则比较之前将字符串转成数字;  

   如果一个操作数是对象,另一操作数是数字或字符串,则比较之前会将对象转为基本类型,  

       引擎会先尝试调用 valueOf(),如果 valueOf() 没有 override 或返回一个对象,  

       则引擎会尝试调用 toString(),如果 toString() 没有 override 或返回一个对象,则抛出异常;  

   如果是两个对象进行比较,则判断它们是否引用同一对象;  

   如果一个操作数是 NaN, == 将返回 false, != 将返回 true;  

   null 和 undefined 与其它值比较将返回 false,  

       但 null == null, undefined == undefined, null == undefined;  

   参与比较时 null 和 undefined 不能转为其它值;   
Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
jquery click([data],fn)使用方法实例介绍
Jul 08 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
Vue.js实现的表格增加删除demo示例
May 22 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
js实现从右往左匀速显示图片(无缝轮播)
Jun 29 Javascript
5种处理js跨域问题方法汇总
Dec 04 #Javascript
用js读、写、删除Cookie代码续篇
Dec 03 #Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 #Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
php 将excel导入mysql
2009/11/09 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
Python中多线程及程序锁浅析
2015/01/21 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Pycharm如何打断点的方法步骤
2019/06/13 Python
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
法国奢华女性时尚配饰网上商店:Monnier Frères
2016/08/27 全球购物
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
新年主持词
2014/03/27 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
教师节随笔
2015/08/15 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
python程序的组织结构详解
2021/12/06 Python
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL