blog

分类： 代码分享

  • CSS布局

    （更多…）

  • 常用正则表达式整理

    （更多…）

  • 关于苹果手机微信页面滑动卡顿问题的解决方法

    问题：页面过长 有滚动条 上下滑动页面不跟手 感觉卡顿 部分手机严重卡顿
    解决方法：在有滚动条的标签上添加：-webkit-overflow-scrolling:touch

  • Windows命令行查看文件的MD5、SHA1、SHA256

    certutil -hashfile D:\1.exe MD5
certutil -hashfile D:\1.exe SHA1
certutil -hashfile D:\1.exe SHA256

  • mousewheel滚轮事件

    原生

    //Chrome 及 IE
document.body.onmousewheel = function (event) {
    event = event || window.event;
    var direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
    console.log(direction);
};

    // Firefox
document.body.addEventListener("DOMMouseScroll", function(event) {
    var direction= event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
    console.log(direction);
});

    jQuery

    $(document).on("mousewheel DOMMouseScroll", function (e) {
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
    if (delta > 0) {
        // 向上滚
        console.log("wheelup");
    } else if (delta < 0) {
        // 向下滚
        console.log("wheeldown");
    }
});

  • CSS小箭头

    active:after {
    content: "";
    border-right: 6px solid #f0f3f4;
    border-top: 6px solid transparent;
    border-bottom: 8px solid transparent;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 0;
}

  • 排序数组

    data.sort(function(x, y) {
                    return x.play_time > y.play_time ? -1 : 1;
                });

  • 常用JS函数—html转义符

    去掉html标签

    function removeHtmlTab(tab) {
 return tab.replace(/<[^<>]+?>/g,'');//删除所有HTML标签
}

    普通字符转换成转意符

    function html2Escape(sHtml) {
 return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});
}

     转成空格

    function nbsp2Space(str) {
 var arrEntities = {'nbsp' : ' '};
 return str.replace(/&(nbsp);/ig, function(all, t){return arrEntities[t]})
}
function space2Nbsp(str) {
 return str.replace(/\s/ig, ' ');
}

    转意符换成普通字符

    function escape2Html(str) {
 var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
 return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}

    回车转为br标签

    function return2Br(str) {
 return str.replace(/\r?\n/g,"
    ");
}

    去除开头结尾换行,并将连续3次以上换行转换成2次换行

    function trimBr(str) {
 str=str.replace(/((\s| )*\r?\n){3,}/g,"\r\n\r\n");//限制最多2次换行
 str=str.replace(/^((\s| )*\r?\n)+/g,'');//清除开头换行
 str=str.replace(/((\s| )*\r?\n)+$/g,'');//清除结尾换行
 return str;
}

    将多个连续空格合并成一个空格

    function mergeSpace(str) {
 str=str.replace(/(\s| )+/g,' ');
 return str;
}

  • JavaScript 大杂烩

    避免污染全局变量

    var foo = 12;
console.log(foo);

    上面的代码等同于

    window.foo = 12;

    如下代码会覆盖系统默认print函数，会让网页无法打印：

    function print () {
   // do something
}
print();

    我们只需要简单的做一下变更，就能避免污染全局变量：

    (function () {
   var foo = 12;
   console.log(window.foo);
   // → undefined
   console.log(foo);
   // → 12
})();

    如果更进一步，可以将window等全局变量当作参数传到function：

    (function (global, doc) {
  global.setTimeout(function () {
     doc.body.innerHTML = "Hello!";
  }, 1000);
})(window, document);

    值类型转换

    // 任何值转为Number
var foo = "12";
var myNumber = +foo;
// → 12
var negativeFoo = -foo;
// → -12
// 对象转为数组
var args = { 0: "foo", 1: "bar", length: 2 };
Array.prototype.slice.call(args)
// → [ 'foo', 'bar' ]
// 转为布尔值
/// 正正得正
var t = 1;
var f = 0;
!!t
// → true
!!f
// → false
/// 正负得负
!t
// → false
!f
// → true
// 转为字符串
var foo = 12;
"" + foo
// → "12"
foo = { hello: "world" };
JSON.stringify(foo);
// → '{ "hello":"world" }'
JSON.stringify(foo, null, 4); // 格式化
// →
// '{
//    "hello": "world"
// }'

  • 常用的正则表达式

    //正整数
/^[0-9]*[1-9][0-9]*$/;
//负整数
/^-[0-9]*[1-9][0-9]*$/;
//正浮点数
/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
//负浮点数
/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/;
//浮点数
/^(-?\d+)(\.\d+)?$/;
//email地址
/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
//url地址
/^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;
或：^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$
//年/月/日（年-月-日、年.月.日）
/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;
//匹配中文字符
/[\u4e00-\u9fa5]/;
//匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线)
/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
//匹配空白行的正则表达式
/\n\s*\r/;
//匹配中国邮政编码
/[1-9]\d{5}(?!\d)/;
//匹配身份证
/\d{15}|\d{18}/;
//匹配国内电话号码
/(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;
//匹配IP地址
/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
//匹配首尾空白字符的正则表达式
/^\s*|\s*$/;
//匹配HTML标记的正则表达式
< (\S*?)[^>]*>.*?|< .*? />;
//sql 语句
^(select|drop|delete|create|update|insert).*$
//提取信息中的网络链接
(h|H)(r|R)(e|E)(f|F) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?
//提取信息中的邮件地址
\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
//提取信息中的图片链接
(s|S)(r|R)(c|C) *= *('|")?(\w|\\|\/|\.)+('|"| *|>)?
//提取信息中的 IP 地址
(\d+)\.(\d+)\.(\d+)\.(\d+)
//取信息中的中国手机号码
(86)*0*13\d{9}
//提取信息中的中国邮政编码
[1-9]{1}(\d+){5}
//提取信息中的浮点数（即小数）
(-?\d*)\.?\d+
//提取信息中的任何数字
(-?\d*)(\.\d+)?
//电话区号
^0\d{2,3}$
//腾讯 QQ 号
^[1-9]*[1-9][0-9]*$
//帐号（字母开头，允许 5-16 字节，允许字母数字下划线）
^[a-zA-Z][a-zA-Z0-9_]{4,15}$
//中文、英文、数字及下划线
^[\u4e00-\u9fa5_a-zA-Z0-9]+$