原生js片段

1. 封装cookie组件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

var Cookie = {

// 读取

read : function(name){

var cookieStr = "; "+document.cookie+"; ";

var index = cookieStr.indexOf("; "+name+"=");

if (index!=-1){

var s = cookieStr.substring(index+name.length+3,cookieStr.length);

return unescape(s.substring(0, s.indexOf("; ")));

}else{

return null;

}

},

// 设置

set : function(name,value,expires){

var expDays = expires*24*60*60*1000;

var expDate = new Date();

expDate.setTime(expDate.getTime()+expDays);

var expString = expires ? ";

expires="+expDate.toGMTString() : "";

var pathString = ";path=/";

document.cookie = name + "=" + escape(value) + expString + pathString;

},

// 删除

del : function(name){

var exp = new Date(new Date().getTime()-1);

var s=this.read(name);

if(s!=null) {

document.cookie= name + "="+s+";

expires="+exp.toGMTString()+";path=/"

}

}

};

// demo:

Cookie.set("xuanfengge", "www.xuanfengge.com", 7);

alert(Cookie.read("xuanfengge"));

Cookie.del("xuanfengge");

2. 字符串比较

1

2

3

4

5

var aString = "Hello!";

var bString = new String("Hello!");

if( aString == "Hello!" ){ } //结果: true

if( aString == bString ){ } //结果: true

if( aString === bString ){ } //结果: false (两个对不同,尽管它们的值相同)

3. 检索字符串

1

2

3

var myString = "hello everybody.";

// 如果检索不到会返回-1,检索到的话返回在该串中的起始位置

if( myString.indexOf("every") > -1 ){ } //结果: true

4. 查找替换字符串

1

2

var myString = "I is your father.";

var result = myString.replace("is","am"); //结果: "I am your father."

5. 截取字符串

1

2

3

4

5

6

7

8

9

10

11

12

//截取第 6 位开始的字符

var myString = "Every good boy does fine.";

var section = myString.substring(6); //结果: "good boy does fine."

//截取第 0 位开始至第 10 位为止的字符

var myString = "Every good boy does fine.";

var section = myString.substring(0,10); //结果: "Every good"

//截取从第 11 位到倒数第 6 位为止的字符

var myString = "Every good boy does fine.";

var section = myString.slice(11,-6); //结果: "boy does"

//从第 6 位开始截取长度为 4 的字符

var myString = "Every good boy does fine.";

var section = myString.substr(6,4); //结果: "good"

6. 字数统计(中英文)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

function fucCheckLength(strTemp){

var i,sum;

sum=0;

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

if ((strTemp.charCodeAt(i)>=0) && (strTemp.charCodeAt(i)<=255)){

sum=sum+1;

}else{

sum=sum+2;

}

}

return sum;

}

// demo:

fucCheckLength("qwe");        //3

fucCheckLength("轩枫");        //4

7. 字符串是否合法日期

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//合法日期:yyyy-mm-dd,分隔符可以为-/.

String.prototype.isDate = function() {

var year,month,date,day;

var reg = /^([12]\d{3})([-\/\.])([01]?\d)\2([0-3]?\d)$/;

if (!reg.test(this)) return false;

year  = RegExp.$1.parseInt();

month = RegExp.$3.parseInt() - 1;

date  = RegExp.$4.parseInt();

day = new Date(year,month,date);

return ((date == day.getDate()) && (month == day.getMonth()));

}

// demo:

"1999-12-20".isDate()

// 合法日期:yyyy-mm-dd,分隔符可以为-/

8. 返回两个日期之间的时间间隔

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

function dateDiff(date1,date2) {

var year,month,date,day1,day2;

var reg = /^(\d{4})([-\/\.])(\d{2})\2(\d{2})$/;

reg.test(date1);

year  = RegExp.$1.parseInt();

month = RegExp.$3.parseInt() - 1;

date  = RegExp.$4.parseInt();

day1 = new Date(year,month,date);

reg.test(date2);

year  = RegExp.$1.parseInt();

month = RegExp.$3.parseInt() - 1;

date  = RegExp.$4.parseInt();

day2 = new Date(year,month,date);

return (day1.getTime() - day2.getTime()) / 86400000;

}

// demo:

// 用以前,先用isDate()判断一下是否合法日期

// 注意:这个函数的reg和isDate()里的reg小you不同

// 以天为单位(date1-date2=?),可以用来比较2个日期大小

9. 判断是否为空对象

1

2

3

4

5

6

7

8

9

10

11

12

function isEmpty(obj){

for(var key in obj){

return false;

}

return true;

}

// demo:

isEmpty({});    //true

isEmpty({"key":"value"});    //false

// jq版本

$.isEmptyObject({});    //true

$.isEmptyObject({"key", "value"});    //false

10. 获取对象的属性个数

1

2

3

4

5

6

7

8

9

10

Object.prototype.length = function() {

var count = 0;

for(var i in this){

count ++;

}

return count;

};

// demo:

var a = {a:1, b:2, c:3, d:4};

alert(a.length());    // 5

by http://www.xuanfengge.com

时间: 2024-11-07 08:59:23

原生js片段的相关文章

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点    var createNode = document.createElement("div");    var createTextNod

原生Js操作DOM

查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个匹配的元素 <div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySel

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <

原生JS写的ajax函数

参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax({}); 调用的方法参照JQuery的ajax,只是 不需要写$.ajax ,只需要写 ajax 就可以了. 代码如下: !function () { var jsonp_idx = 1; return ajax = function (url, options) { if (typeof url

原生js自动触发事件

熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为,如点击(click)操作等. 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法. dispatchEvent() 方法给节点分派一个合成事件. 语法如下: dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScrip

使用原生js的scrollTop,刷新进入页面定位到某一个dom元素

原生js的scrollTop即可,与jquery方法的区别是jquery做了兼容封装.我想要实现的功能是时间定位,根据当前时间定位到滚动区的时间位置.页面为移动端页面,上下固定位置,中部为1小时4格的选择区域,从0点到24点. 开始我想发出现了偏差,总想定位到某个dom,这样使得scrollTop一直是0,怎么设置都不行,后来仔细分析才发现要设置在超出当前可视区域的dom上才可以. 所以设置在外层overflow-x:scroll;的dom上即可,根据时间匹配dom位置,根据索引及每格的高度计算

原生JS封装运动框架

昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子,如下代码: #div{ width: 100px; height: 100px; background

常用原生JS兼容写法

在我们前端开发中,经常会遇到兼容性的问题,因为要考虑用户会使用不同的浏览器来访问你的页面,你要保证你做的网页在任何一个浏览器中都能正常的运行,下面我就举几个常用原生JS的兼容写法: 1:添加事件方法 addHandler:function(element,type,handler){  if(element.addEventListener){//检测是否为DOM2级方法   element.addEventListener(type, handler, false);  }else if (e

原生js实现数据双向绑定

最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里 缺点:一旦HTML代码生成就没有办法改变,如果有新数据重新传入,就必须重新把模板和数据整合到一起插入到文档流中 数据双向绑定 数据模型和视图之间的双向绑定,用户在视图上的修改会自动同步到数据模型中,同样的,如果数据模型中的值发生变化,也会同步到视图中去