作为一个后端的coder，也或者随着自己的”年龄大“了，对于前端的一些js方法总不爱记，然而有时候要用起来就只记得个大概，往往造成在这个项目、那个项目里找，很不方便。那干脆把常用到的一些记录在这个博客里，目的也只有一个：方便自己以后查询而已。
1、网站里常用的【回到顶部】功能。
/**
* JavaScript脚本实现回到页面顶部示例
* @param acceleration 速度
* @param stime 时间间隔 (毫秒)
**/
function gotoTop(acceleration, stime) {
acceleration = acceleration || 0.1;
stime = stime || 10;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var x3 = 0;
var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
var x3 = window.scrollX || 0;
var y3 = window.scrollY || 0;
// 滚动条到页面顶部的水平距离
var x = Math.max(x1, Math.max(x2, x3));
// 滚动条到页面顶部的垂直距离
var y = Math.max(y1, Math.max(y2, y3));
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
var speeding = 1 + acceleration;
window.scrollTo(Math.floor(x / speeding), Math.floor(y / speeding));
// 如果距离不为零, 继续调用函数
if (x > 0 || y > 0) {
var run = "gotoTop(" + acceleration + ", " + stime + ")";
window.setTimeout(run, stime);
}
}
2、获取英文、数字、符号、汉字的字节长度
/**
* 获取英文、数字、符号、汉字的字节长度
* @param s 要计算的字符串
**/
function getCharStringLength(s) {
var l = 0;
var a = s.split("");
for (var i = 0; i < a.length; i++) {
if (a[i].charCodeAt(0) < 299) {
l++;
} else {
l += 2;
}
}
return l;
}
3、截取字符串（中英文都能用）
/**
* js截取字符串，中英文都能用
* @param str：需要截取的字符串
* @param len: 需要截取的长度
*/
function cutStr(str, len) {
if (str == null)
return "";
var str_length = 0;
var str_len = 0;
str_cut = new String();
str_len = str.length;
for (var i = 0; i < str_len; i++) {
a = str.charAt(i);
str_length++;
if (escape(a).length > 4) {
//中文字符的长度经编码之后大于4
str_length++;
}
str_cut = str_cut.concat(a);
if (i == (str_len - 1) && str_length == len)
return str_cut;
if (str_length >= len) {
str_cut = str_cut.concat("...");
return str_cut;
}
}
//如果给定字符串小于指定长度，则返回源字符串；
if (str_length < len) {
return str;
}
}
4、字符串转Uniencode
/**
* @param text：需要转换的字符串
*/
function uniencode(text) {
text = escape(text.toString()).replace(/+/g, "%2B");
var matches = text.match(/(%([0-9A-F]{2}))/gi);
if (matches) {
for (var matchid = 0; matchid < matches.length; matchid++) {
var code = matches[matchid].substring(1, 3);
if (parseInt(code, 16) >= 128) {
text = text.replace(matches[matchid], '%u00' + code);
}
}
}
text = text.replace('%25', '%u0025');
return text;
}
5、Json格式日期转字符串日期
/**
* @param jsondate：需要转换的json日期
* @param type: 需要截取的长度，空或“date”：2016-12-2，time：2016-12-2 15：26
*/
function JsonDateToJSDate(jsondate,type) {
var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));
if (type=="" || type == "date")
return getDate(date);
else if(type=="time")
return getTime(date);
}
function getDate(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return year + "-" + month + "-" + day;
}
function getTime(date) {
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
return year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
6、将JSON格式的时间/Date(2367828670431)/格式 转为正常的年-月-日 格式
/**
* 获取正常日期格式
*/
function formatDate(NewDtime) {
var dt = new Date(parseInt(NewDtime.slice(6, 19)));
var year = dt.getFullYear();
var month = dt.getMonth() + 1;
var date = dt.getDate();
var hour = dt.getHours();
var minute = dt.getMinutes();
var second = dt.getSeconds();
return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}
7、解决H5属性placeholder在一些不浏览器不兼容问题
var JPlaceHolder = {
//检测
_check: function () {
return 'placeholder' in document.createElement('input');
},
//初始化
init: function () {
if (!this._check()) {
this.fix();
}
},
//修复
fix: function () {
jQuery(':input[placeholder]').each(function (index, element) {
var self = $(this), txt = self.attr('placeholder');
if (!self.val()) {
self.wrap($('<div></div>').css({ position: 'relative', zoom: '1', border: 'none', background: 'none', padding: 'none', margin: 'none' }));
var pos = self.position(), h = self.outerHeight(), paddingleft = self.css('padding-left');
var holder = $('<span></span>').text(txt).css({ position: 'absolute', left: pos.left, top: pos.top, height: h, lineHeight: h + "px", paddingLeft: paddingleft, color: '#aaa' }).appendTo(self.parent());
self.focusin(function (e) {
holder.hide();
}).focusout(function (e) {
if (!self.val()) {
holder.show();
}
});
holder.click(function (e) {
holder.hide();
self.focus();
});
}
});
}
};
//执行
jQuery(function () {
JPlaceHolder.init();
});
8、模拟后台获取前端参数
/*
* 模拟后台获取传递参数值
*/
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest;
}
/*
* 使用例子
* var Request = new Object();
* Request = GetRequest();
* var type = Request["type"];
*/
9、货币格式化
/*
* 格式：￥100,100,00.00
*/
function formatCurrency(num) {
if (num == null) {
var money = "¥0.00"
return money;
}
num = num.toString().replace(/$|\,/g, '');
if (isNaN(num))
num = "0";
var sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
var cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' +
num.substring(num.length - (4 * i + 3));
return "¥" + (((sign) ? '' : '-') + num + '.' + cents);
}
暂时写到这里，后面有的继续补充。