简单的搭建局域网内网站

2014-03-05 · 10 min read

在工作中常常会遇到这样的情况:

  • 你写完静态页,需要给产品审核确认
  • 你的站点环境部署比较麻烦,同事在自己的电脑上部署困难较大
  • 你实现了一个 wap 站点,需要使用手机访问以进行测试
  • 你的同事需要调用你的接口,但是他没有部署 asp.net 或者 php 的环境
  • ……

此时,如果你可以在自己的电脑上简单的部署一个站点,让公司内的同事或者手机 wifi  直接通过你的 IP 访问,会带来极大的方便。下面简单讲讲基于 IIS 搭建通过 IP 访问的局域网站点。

CSS实现文本溢出自动截断

2014-03-05 · 5 min read

在 web 前端开发中,经常要处理的一种情况就是“文本溢出”。比较友好的处理方式是溢出的文本不显示,在末尾加上“…”。实现方式多种多样,可以直接后端程序截断,前端 js 截断或者 CSS 实现截断。下面介绍 CSS 截断的方法。

带进度条的图片预加载效果

2014-03-05 · 4 min read

所谓的“图片预加载”就是先加载一张不清晰的图片,然后加载一张高清图片,实现由模糊到清晰的渐变。防止页面空白影响用户体验。具体效果请看在线演示

原理其实很简单,使用两张图片实现:一张小的缩略图,一张大的高清图,将缩略图拉大到高清图的尺寸(这就是模糊的效果),然后加载高清图片,加载完成修改<img>标签的 src。

CSS的word-break属性

2014-03-05 · 10 min read

要了解 CSS 的换行,先要明白两个概念:“CJK 文本”和“non-CJK”文本,CJK 代表的就是中文(Chinese)、日文(Japanese)和韩文(Korean)等亚洲语言,non-CJK 就是指非亚洲语言(英语之类的)。

CSS 的word-break指定怎样在单词内断行。他有下面几个值:

  • normal(默认)
  • break-all
  • keep-all

下面一个一个解释:

关闭Kindeditor for wordpress的过滤模式

2014-02-05 · 6 min read

有的时候需要直接在 Kindeditor 中写代码,例如<code>标签,编辑器本身没有这个功能的(注意“插入程序代码”是<pre>不是<code>),但是你切换“HTML 代码模式”直接写代码的时候,很多 HTML 标签和属性会被过滤掉,这就是所谓的“过滤模式”,官网有如果关闭过滤模式的文档,但是没有针对 wordpress 插件的。经过一番寻找终于修改成功,方法如下:

优化Kindeditor的代码高亮

2014-02-05 · 8 min read

由于 WordPress 原本的富文本编辑器功能比较简单,所以使用了 Kindeditor 插件(安装方法看这里)。但是最近发现一个问题,就是在页面没有完全载入的情况下,代码高亮不起来,就是下图的样子:

JavaScript判断密码强度

2014-02-05 · 7 min read

先上 Demo,下面是代码:

;(function ($) {
  /*
   * 0-弱
   * 1-中
   * 2-强
   */

  var pswstrength = function () {}

  pswstrength.prototype = {
    constructor: pswstrength,
    //Unicode 编码区分数字,字母,特殊字符
    CharMode: function (iN) {
      if (iN >= 48 && iN <= 57)
        //数字(U+0030 - U+0039)
        return 1 //二进制是0001
      if (iN >= 65 && iN <= 90)
        //大写字母(U+0041 - U+005A)
        return 2 //二进制是0010
      if (iN >= 97 && iN <= 122)
        //小写字母(U+0061 - U+007A)
        return 4
      //二进制是0100
      //其他算特殊字符
      else return 8 //二进制是1000
    },
    bitTotal: function (num) {
      modes = 0
      for (i = 0; i < 4; i++) {
        if (num & 1)
          //num不是0的话
          modes++ //复杂度+1
        num >>>= 1 //num右移1位
      }
      return modes
    },
    check: function (sPW) {
      if (sPW.length < 7)
        //小于7位,直接“弱”
        return 0
      Modes = 0
      for (i = 0; i < sPW.length; i++) {
        //密码的每一位执行“位运算 OR”
        Modes |= this.CharMode(sPW.charCodeAt(i))
      }
      return this.bitTotal(Modes)
    },
  }

  if (typeof $.pswstrength == 'undefined' || $.pswstrength == null) {
    $.pswstrength = new pswstrength()
  }
})(jQuery)

原理主要利用二进制数,数字标记为 1,大写字母标记为 2,小写字母标记为 4,特殊字符标记为 8,他们的二进制数如下表:

  • 1: 0001
  • 2: 0010
  • 4: 0100
  • 8: 1000

位运算 OR 计算密码的每一位,得到一个四位的二进制数,从而得出密码强度。

如果不了解位运算的话,可以看看 W3School 的教程