Category Archives: JavaScript

九 28

JS设置cookie、读取cookie、删除cookie

Posted on by

Cookie 用于存储 web 页面的用户信息。

JS设置cookie、读取cookie、删除cookie、写入cookie、获取cookie实例代码。

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

0
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
37
38
39
40
41
42
43
44
45
46
47
48
<script>
//写cookies
function setCookie(name,value,time){
if(!time){
time = 'h1';
}
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString()+ ";path=/";
}
function getsec(str){
alert(str); /////
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s"){ // N秒
return str1*1000;
}else if (str2=="h"){ // N小时
return str1*60*60*1000;
}else if (str2=="d"){ // N天
return str1*24*60*60*1000;
}
}
// 读取cookies
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
// 删除cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
 
//使用示例
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","mrdede", 's60');
alert(getCookie("name"));
delCookie('DedeUserID')
</script>

 

九 13

js倒计时60秒/获取短信验证码等待60秒代码

Posted on by

代码如下：

0
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js实现倒计时60秒的简单代码(推荐)</title>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
 
<body>
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />
<script type="text/javascript">
    var countdown=60;
    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value="免费获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value="重新发送(" + countdown + ")";
            countdown--;
            setTimeout(function() {
                settime(val)
            },1000)
        }
 
    }
</script>
</body>
</html>

 

八 17

JS去除字符串左右两端的空格

Posted on by

去除字符串左右两端的空格，在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim，但在js中却没有这3个内置方法，需要手工编写。下面的实现方法是用到了正则表达式，效率不错，并把这三个方法加入String对象的内置方法中去。

写成类的方法格式如下：（str.trim();）

0
1
2
3
4
5
6
7
8
9
10
<script language="javascript">
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.ltrim=function(){
return this.replace(/(^\s*)/g,"");
}
String.prototype.rtrim=function(){
return this.replace(/(\s*$)/g,"");
}
</script>

写成函数可以这样：(trim(str))

0
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
function trim(str){ //删除左右两端的空格
return str.replace(/(^\s*)|(\s*$)/g, "");
}
function ltrim(str){ //删除左边的空格
return str.replace(/(^\s*)/g,"");
}
function rtrim(str){ //删除右边的空格
return str.replace(/(\s*$)/g,"");
}
</script>

 

四 26

js克隆函数

Posted on by

1、函数预编译过程 this —> window
2、全局作用域里 this —> window
3、obj.func(); func()里面的this指向obj)， 可以这样理解，谁调用func，则this就指向谁
4、call/apply 可以改变函数运行时this指向，
（1）、call用法：
func.call(要改变后的this, arg1, arg2, … );
（2）、apply用法:
func.apply(要改变后的this, [arg1, arg2, arg2]);
（3）、apply和call共同点：都是改变this指向
apply和call不同点：传参形式不同,call是将参数一个个传进来，而apply是将所有参数存进一个数组中，然后将该数组传

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// demo1
    function demo1() {
        console.log(this);
    }
    // demo1() <==> this.demo1(); <==> window.demo1()
    demo1(); // window
// demo2
    var demo2 = {
        retThis: function () {
            console.log(this);
        }
    }
    demo2.retThis(); // demo2 = {...}
// call / apply改变this
    demo1.call(demo2);  // demo2 = {}
    demo2.retThis.call(window); // window

对象克隆，分为浅克隆和深克隆，而上边的直接赋值的克隆操作为浅克隆，为什么称为浅克隆呢？因为，克隆的和被克隆的对象在克隆操作完成后，指向同一个地址引用，改变其中一个（注意：此处的改变为增加或删除对象的属性，而不是为该对象重新赋值一个对象），另一个也会改变，而深克隆则不会产生此现象。

深克隆/深拷贝代码如下：

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 对象的深度克隆（Array / obj /...）
function  deepClone(obj) {
var str, retObj = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {};
if(typeof obj !== 'object') {
return;
}else if(window.JSON) {
str = JSON.stringify(obj);
retObj = JSON.parse(str);
}
else {
for(var prop in obj) {
retObj[prop] = typeof obj[prop] === 'object' ? deepClone(obj[prop]) : obj[prop];
}
}
return retObj;
}

Continue reading →

三 27

解决微信开发报错：config:fail,invalid url domain

Posted on by

解决微信报错：config:fail,invalid url domain

进入微信公众号管理后台，设置 >> 公众号设置 >> 功能设置 >> JS接口安全域名，改成自己的域名。

下面这两项虽然不会引上标题提到的问题，但是也检查一下，修改成自己的域名。

设置 >> 公众号设置 >> 功能设置 >> 业务域名

设置 >> 公众号设置 >> 功能设置 >> 网页授权域名

三 20

js创建对象之设计模式

Posted on by

封装类

1. 工厂模式

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function createPerson(name, age){
 
    var obj = new Object();
 
    obj.name = name;
    obj.age = age;
 
    obj.sayName = function(){
        console.log(this.name); // | console.log(obj.name)
    };
 
    return obj;
}
 
var p1 = createPerson("ys", 12);
var p2 = createPerson("ys", 12);
console.log(p1);         // { name: 'ys', age: 12, sayName: [Function] }
console.log(p2);         // { name: 'ys', age: 12, sayName: [Function] }
console.log(p1 == p2);   //false

特点:

  • 内部创建对象，外部返回，相当于调用函数，
  • 对象无类型（比如其他oo语言，new一个对象，那个这个对象的构造函数就是对象类型）

2.构造函数模式

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function Person(name, age){
    this.name = name;
    this.age = age;
 
    this.sayName = function(){
        console.log(this.name);
    };
}
 
var p1 = new Person("ys", 12);
var p2 = new Person("ys", 12);
console.log(p1);                        // { name: 'ys', age: 12, sayName: [Function] }
console.log(p2);                        // { name: 'ys', age: 12, sayName: [Function] }
console.log(p1 == p2);                  //false
console.log(p1 instanceof Person);      //true
console.log(p2 instanceof Person);      //true
console.log(p1 instanceof Object);      //true
console.log(p2 instanceof Object);      //true
 
console.log(p1.constructor == Person);  //true  /*constructor属性为构造函数属性，指向构造函数Person*/
console.log(p2.constructor == Person);  //true

特点： Continue reading →

三 11

js封装base64实现加密、解密

Posted on by

JS函数实现base64加密、base64解密

一、封装函数

0
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/**
*
* Base64 encode / decode
*
* @author mrdede
* @date   2010-04-26
* @email  1234567@qq.com
*
* 使用方法：
* // 1.加密
* var str = '124中文内容';
* var base = new Base64();
* var result = base.encode(str);
* document.write(result);
*
* // 2.解密
* var result2 = base.decode(result);
* document.write(result2);
*
*/  
 
function Base64() {
 
// private property
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
 
// public method for encoding
this.encode = function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}
 
// public method for decoding
this.decode = function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
}
 
// private method for UTF-8 encoding
_utf8_encode = function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}  
}  
return utftext;
}
 
// private method for UTF-8 decoding
_utf8_decode = function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while ( i < utftext.length ) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}

二、成品插件 Continue reading →

一 26

原生JS获取body宽度高度（含padding+border）

Posted on by

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*视口的大小，部分移动设备浏览器对innerWidth的兼容性不好，需要
*document.documentElement.clientWidth或者document.body.clientWidth
*来兼容（混杂模式下对document.documentElement.clientWidth不支持）。
*使用方法 ： getViewPort().width;
*/
function getViewPort () {
    if(document.compatMode == "BackCompat") {   //浏览器嗅探，混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
    } else {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }
}
// 使用 包含padding border
getViewPort().width; // 获取宽度
getViewPort().height; // 获取高度

 

十二 18

JQuery获取DIV宽度与高度（width,padding,margin,border）

Posted on by

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。

JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！

0
1
2
3
4
5
6
var content = $('div'). width();//只是获取content宽度
 
var contentWithPadding = $('div'). innerWidth();//获取content+padding的宽度
 
var withoutMargin = $('div'). outerWidth();//获取content+padding+border的宽度
 
var full = $('div'). outerWidth(true);//获取content+padding+border+margin的宽度

宽度与高度概念一样，只差水平与垂直向而已。

Margin 有个特色，就是当两个有 margin的 div 靠在一起时，两个 div 紧邻的 margin 不是相加，而是取其大者，举例来说，两个 10px margin 的 div 并在一起只会有 10px margin 的距离，若是一个 20px margin，另一个为 10px margin，则会有 20px 的 margin。

但是获取当前元素的全部宽度的时候，还是获取自身的margin+content+padding+border的值。