一些逼格略高的 js 片段
// 一个接一个运行
// timeout 不能直接放在 for 里面,暂时不知道为什么
function functionOneByOne(fn, times, duration) {
for(var i=0; i<times; i++) {
timecout(i);
}
function timecout(index) {
setTimeout(function(){
if (fn) fn(index);
}, duration*index);
}
}
// 区间内持续时间的变化,比如可以做平滑动画什么的
function smooth(start, end, duration, fn) {
var start = start || 0,
end = end || 0,
offset = end - start,
duration = duration || 1000,
now = Date.now(); a(); function a() {
var x = Math.min(1, (Date.now() - now) / duration);
if (fn) fn(offset * x + start);
1 > x && setTimeout(a, 10);
}
}
// 求数组 arr 中的最大最小值
Math.max.apply(Math, arr);
Math.min.apply(Math, arr);
//字符串去首尾空格
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
// 区间内的随机数
function RandomNumber(min, max) {
return (min||0) + Math.random() * ((max||1) - (min||0));
}
// 获取 search 中对应键的值
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
// 生成一个连续数字的数组
function creatNumberArray(length, start) {
var arr = []; start = start || 0;
for(var i=start; arr.push(i++)<length;);
return arr;
}
// 数字数组 arr 改成从小到大排序
arr.sort(function(a,b){return Math.random()>0.5 ? -1 : 1;});
// 获得 dom 元素,可传入 类名/索引/对象
function getElem(o, box) {
if (typeof o == "string") return document.querySelector(obj);
else if (typeof o == "number") return getObj(box).eq(o)[0];
else if (typeof o == "object") {
if (typeof o.css == "function") return o[0];
else return o;
}
}
// 获取 jquery 元素,参数同上
function getObj(o, box) {
if (typeof o == "string") return $(o);
else if (typeof o == "number") return getObj(box).eq(o);
else if (typeof o == "object") {
if (typeof o.css == "function") return o;
else return $(o);
}
}
// 将 html 编译成 text
function encodeHTML( str ) {
var elem = document.createElement('span');
elem.appendChild( document.createTextNode( str ) );
return elem.innerHTML;
}
// 将 text 编译成 html
function decodeHTML( str ) {
str = str.replace(/</g,'<').replace(/>/g,'>')
var elem = document.createElement('span');
elem.innerHTML = str;
return elem.textContent || elem.innerText;
}
// 产生随机颜色
function randomColor() {
var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
if (rand.length == 6) return '#' + rand;
else return randomColor();
}
这些方法个人都用得挺多的,然后再分享一个最近发现的装逼技能。
var x = i * i, i == 5 && fn();
// “,” 虽然看上去和 “;” 类似,但更容易表明 i 和 fn() 有基情
// 其次,&& 则类同于 if(i == 5) fn(); 是不是很带感, i < 10 || fn(); 则能等同于 if(i != 5) fn();
一些逼格略高的 js 片段的更多相关文章
- 编写高质量JS代码的68个有效方法(八)
[20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法(七)
[20141220]编写高质量JS代码的68个有效方法(七) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法(六)
[20141213]编写高质量JS代码的68个有效方法(六) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法(四)
[20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法(三)
[20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- 编写高质量JS代码的68个有效方法(二)
[20141011]编写高质量JS代码的68个有效方法(二) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)
编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...
- 广告等第三方应用嵌入到web页面方案 之 使用js片段
在自己的项目中嵌入过广告的朋友们可能都用过百度联盟, 只需要嵌入如下一段js代码片段, 就可以在自己的项目中嵌入广告, 来获得收益. <script type="text javasc ...
- 编写高质量JS代码中
前段时间看了几道关于前端javascript的面试题目,方觉函数调用模式等基础的重要性.于是,下定决心,好好补补基础,即便不能深入语言的内部设计模式,也要对基本面向对象概念有比较深入的理解. 继续上一 ...
随机推荐
- SDUTOJ 2772 KMP简单应用
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUl9NaXNheWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- 多媒体开发之---h264格式详解
http://blog.csdn.net/bluebirdssh/article/details/6533501 http://blog.csdn.net/d_l_u_f/article/detail ...
- Ionic 取消自带动画效果
$ionicConfigProvider.views.transition('none'); 或: <ion-view view-title="个人中心" animation ...
- poj3177Redundant Paths tarjan缩点
//给一个连通图,问最少须要加入多少条边才干使得 //随意两个点都有两条不同的路走到 //对于一个强连通分量的全部随意两点都能有两点能够到达 //先用tarjan缩点,缩点以后就是一棵树,对于这个树考 ...
- HTML5新增的语义标签和IE版本低的兼容性问题
<!DOCTYPE html><html> <head> <!-- HTML5中浏览器兼容(较低版本的IE浏览器不支持H5的布局):需要在<head&g ...
- VMware下安装centos6.7的步骤
一.虚拟机的创建 1.点击创建新的虚拟机(图片红框的位置) 2.选择自定义安装.下一步(根据自己的需要有选择的进行选择) 3.新装的虚拟机的版本和虚拟机兼容的产品以及这个版本的虚拟机的限制(这个窗口没 ...
- SharePoint服务器端对象模型 之 访问网站和列表数据(Part 4)
(四)栏/字段 SharePoint中的字段(中文版中叫做"栏")与传统的数据栏类似,也有不同类型的区别,不过SharePoint中内置的栏类型除了按照数据类型(如数字.日期和时间 ...
- 一个经验丰富的网站建设程序员的CSS资料
没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CS ...
- MySQL中事务的分类
从事务理论的角度来看,可以把事务分为以下几种类型 扁平事务(Flat Transactions) 带有保存点的扁平事务(Flat Transactions with Savepoints) 链事务(C ...
- 前端基础-html(1)
写在前面: 前端 后端 C(client) S(server) B(browser) S(server) 以用户为出发点 一.web标准 1)web ...