CookyGG的个人博客

实践发现真理~

  • 首页
  • 关于
  • 标签
  • 分类
  • 归档

将form表单转化成Javascript object

发表于 2018-02-23 | 分类于 js
字数统计: | 阅读时长 ≈

$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ‘’); } else { o[this.name] = this.value || ‘’; } }); return o; }

JS获取URL中参数值

发表于 2018-02-23 | 分类于 js
字数统计: | 阅读时长 ≈


1
2
3
4
5
6
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=(\[^&\]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r\ [2\]);
return null;
}

pointer-events

发表于 2018-02-23 | 分类于 css
字数统计: | 阅读时长 ≈


1
css3 pointer-events(阻止hover、active、onclick等触发事件)

===============================================

js 精确计算

发表于 2018-02-23 | 分类于 js
字数统计: | 阅读时长 ≈


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
/\*\* 
** 加法函数,用来得到精确的加法结果
** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
** 调用:accAdd(arg1,arg2)
** 返回值:arg1加上arg2的精确结果
**/


<!-- more -->


function accAdd(arg1, arg2) {
var r1, r2, m, c;
try {
r1 = arg1.toString().split(".")\ [1\].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")\ [1\].length;
} catch (e) {
r2 = 0;
}
c = Math.abs(r1 - r2);
m = Math.pow(10, Math.max(r1, r2));
if (c > 0) {
var cm = Math.pow(10, c);
if (r1 > r2) {
arg1 = Number(arg1.toString().replace(".", ""));
arg2 = Number(arg2.toString().replace(".", "")) * cm;
} else {
arg1 = Number(arg1.toString().replace(".", "")) * cm;
arg2 = Number(arg2.toString().replace(".", ""));
}
} else {
arg1 = Number(arg1.toString().replace(".", ""));
arg2 = Number(arg2.toString().replace(".", ""));
}
return (arg1 + arg2) / m;
} 
/** ** 减法函数,用来得到精确的减法结果 ** 说明:javascript的减法结果会有误差,在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。 ** 调用:accSub(arg1,arg2) ** 返回值:arg1减去arg2的精确结果 **/


function accSub(arg1, arg2) {
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")\ [1\].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")\ [1\].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
} 
/** ** 乘法函数,用来得到精确的乘法结果 ** 说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。 ** 调用:accMul(arg1,arg2) ** 返回值:arg1乘以 arg2的精确结果 **/


function accMul(arg1, arg2) {
var m = 0,
s1 = arg1.toString(),
s2 = arg2.toString();
try {
m += s1.split(".")\ [1\].length;
} catch (e) {}
try {
m += s2.split(".")\ [1\].length;
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
} 
/** ** 除法函数,用来得到精确的除法结果 ** 说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。 ** 调用:accDiv(arg1,arg2) ** 返回值:arg1除以arg2的精确结果 **/


function accDiv(arg1, arg2) {
var t1 = 0,
t2 = 0,
r1, r2;
try {
t1 = arg1.toString().split(".")\ [1\].length;
} catch (e) {}
try {
t2 = arg2.toString().split(".")\ [1\].length;
} catch (e) {}
with(Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}

calc less写法

发表于 2018-02-23 | 分类于 css
字数统计: | 阅读时长 ≈


1
div { @diff : 30px; width : calc(~"100% - @{diff}"); }

这种写法又能编译,Webstorm里又不报错,所以我比较喜欢用这种写法,如此,便不会再有任何问题了。

计算两个时间的时间差

发表于 2018-02-23 | 分类于 js
字数统计: | 阅读时长 ≈

写在前面:

如题,就像题目说的需要计算出时间差,虽然不太难,但这个需求经常会在项目中遇到的,我在这边做一下整理,希望能够尽量全的整理出来。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 本文转载于blog

计算时间差原理:

阅读全文 »

使用letter-spacing和word-spacing去除格栅单元见间隔方法

发表于 2018-02-23 | 分类于 css
字数统计: | 阅读时长 ≈

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理): .yui3-g { letter-spacing: -0.31em; / webkit / *letter-spacing: normal; /* IE < 8 重置 / word-spacing: -0.43em; / IE < 8 && gecko /} .yui3-u { display: inline-block; zoom: 1; \display: inline; /* IE < 8: 伪造 inline-block / letter-spacing: normal; word-spacing: normal; vertical-align: top;} 以下是一个名叫RayM的人提供的方法: li { display:inline-block; background: orange; padding:10px; word-spacing:0; }ul { width:100%; display:table; / 调教webkit/ word-spacing:-1em;} .nav li { display:inline;}

上传图片截图预览控件不显示cropper.js 跨域问题

发表于 2018-02-23 | 分类于 html , js
字数统计: | 阅读时长 ≈

对于高版本(我用的Cropper v2.3.4)因为代码调整了,找到 function getCrossOrigin(crossOrigin),将里面返回跨域代码的那行注释掉,返回空字符串就好了。 我是这样改的: function getCrossOrigin(crossOrigin) { //return crossOrigin ? ‘ crossOrigin=”‘ + crossOrigin + ‘“‘ : ‘’; return ‘’; } 可以显示出来了

表单序列化数组相同转JSON

发表于 2018-02-23 | 分类于 js
字数统计: | 阅读时长 ≈
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || ‘’);
} else {
o[this.name] = this.value || ‘’;
}
});
return o;
}

rem + less页面布局

发表于 2018-02-23 | 分类于 css , html
字数统计: | 阅读时长 ≈

rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。

阅读全文 »
12345

Hao Pu

CookyGG个人站,主要涉及前端知识共享、技术学习等方面

41 日志
7 分类
GitHub E-Mail
Links
  • Web前端导航
  • 创造狮导航
  • 前端书籍资料
  • 掘金酱
  • V2EX
  • 印记中文
© 2019 Hao Pu | Site words total count: