作为一个后端的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); }
暂时写到这里,后面有的继续补充。