Html on ZRJ | 学习笔记

Chrome 中印象笔记悦读插件的问题

Tue, 10 Feb 2015 21:00:34 +0800

印象笔记有一个 Chrome 插件，叫做悦读，可以过滤页面上的杂乱元素，得到一个清爽的纯内容视图，并且可以剪辑到印象笔记中，是个很好的插件。

然而有一个问题，例如这个页面，http://www.techxue.com/techxue-12450-1.html，摘取一段话

微信由腾讯公司于2011年1月推出，到2013年第4季度，注册用户量已经突破6亿，月活跃用户数达到3.55亿，是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权，近期它与支付宝的对决，更是霸气侧漏。那么，这么高逼格的平台是如何横空出世的呢。请往下看。

这段话在阅读器视图中变成了

微信由腾讯公司于月推出，到季度，注册用户量已经突破亿，月活跃用户数达到亿，是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权，近期它与支付宝的对决，更是霸气侧漏。那么，这么高逼格的平台是如何横空出世的呢。请往下看。

很明显，数字都不见了，看了一眼源代码，究其原因，是因为代码的 span 标签有 lang 属性

<font size="3">
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">微信由腾讯公司于</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2011</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">1</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">月推出，到</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2013</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年第</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">4</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		季度，注册
		<a href="http://techxue.com/yonghu/" target="_blank" class="relatedlink">用户</a>量已经突破
	</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">6</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">亿，月活跃用户数达到</span>
	<span lang="EN-US" style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">3.55</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		亿，是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权，近期它与
		<a href="http://www.techxue.com/dutu/zhifu/" target="_blank" class="relatedlink">支付</a>宝的对决，更是霸气侧漏。那么，这么高逼格的平台是如何横空出世的呢。请往下看。
	</span>
</font>

我猜这是某个富文本编辑工具加上的，那么自然想到，如果把这些差异抹平，是不是问题就可以解决，怎么去掉呢，jQuery 自然就是一个办法，那么首先的问题就是怎么引入 jQuery，这里说了，http://stackoverflow.com/questions/7474354/include-jquery-in-the-javascript-console

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

然后去掉 span 的 lang 其实就是一行代码的事情

$("span[lang]").removeAttr("lang")

完成之后的效果就是

<font size="3">
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">微信由腾讯公司于</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2011</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">1</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">月推出，到</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">2013</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">年第</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">4</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		季度，注册
		<a href="http://techxue.com/yonghu/" target="_blank" class="relatedlink">用户</a>量已经突破
	</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">6</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">亿，月活跃用户数达到</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">3.55</span>
	<span style="font-family: 微软雅黑, sans-serif; line-height: 200%; text-indent: 21pt;">
		亿，是亚洲地区拥有最大用户群体的移动即时通讯软件。它先后实现了公众平台、朋友圈、消息推送、钱包等功能。现在的微信拥有巨大的话语权，近期它与
		<a href="http://www.techxue.com/dutu/zhifu/" target="_blank" class="relatedlink">支付</a>宝的对决，更是霸气侧漏。那么，这么高逼格的平台是如何横空出世的呢。请往下看。
	</span>
</font>

本来一心以为这样就搞掂了，但是一启动阅读器视图，还是那个鸟样，看来还是有什么地方没有搞好，后续继续折腾。

Javascript 执行一次 MD5 或 SHA1 需要多久

Wed, 03 Apr 2013 15:16:44 +0800

首先是 Javascript 算 MD5 的问题，看到这里，http://pajhome.org.uk/crypt/md5/，于是就是加一个时间打点，然后跑了

<script>

/*
 * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
 * Digest Algorithm, as defined in RFC 1321.
 * Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
 * Distributed under the BSD License
 * See http://pajhome.org.uk/crypt/md5 for more info.
 */

/*
 * Configurable variables. You may need to tweak these to be compatible with
 * the server-side, but the defaults work in most cases.
 */
var hexcase = 0;   /* hex output format. 0 - lowercase; 1 - uppercase        */
var b64pad  = "";  /* base-64 pad character. "=" for strict RFC compliance   */

/*
 * These are the functions you'll usually want to call
 * They take string arguments and return either hex or base-64 encoded strings
 */
function hex_md5(s)    { return rstr2hex(rstr_md5(str2rstr_utf8(s))); }
function b64_md5(s)    { return rstr2b64(rstr_md5(str2rstr_utf8(s))); }
function any_md5(s, e) { return rstr2any(rstr_md5(str2rstr_utf8(s)), e); }
function hex_hmac_md5(k, d)
  { return rstr2hex(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
function b64_hmac_md5(k, d)
  { return rstr2b64(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d))); }
function any_hmac_md5(k, d, e)
  { return rstr2any(rstr_hmac_md5(str2rstr_utf8(k), str2rstr_utf8(d)), e); }

/*
 * Perform a simple self-test to see if the VM is working
 */
function md5_vm_test()
{
  return hex_md5("abc").toLowerCase() == "900150983cd24fb0d6963f7d28e17f72";
}

/*
 * Calculate the MD5 of a raw string
 */
function rstr_md5(s)
{
  return binl2rstr(binl_md5(rstr2binl(s), s.length * 8));
}

/*
 * Calculate the HMAC-MD5, of a key and some data (raw strings)
 */
function rstr_hmac_md5(key, data)
{
  var bkey = rstr2binl(key);
  if(bkey.length > 16) bkey = binl_md5(bkey, key.length * 8);

  var ipad = Array(16), opad = Array(16);
  for(var i = 0; i < 16; i++)
  {
    ipad[i] = bkey[i] ^ 0x36363636;
    opad[i] = bkey[i] ^ 0x5C5C5C5C;
  }

  var hash = binl_md5(ipad.concat(rstr2binl(data)), 512 + data.length * 8);
  return binl2rstr(binl_md5(opad.concat(hash), 512 + 128));
}

/*
 * Convert a raw string to a hex string
 */
function rstr2hex(input)
{
  try { hexcase } catch(e) { hexcase=0; }
  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
  var output = "";
  var x;
  for(var i = 0; i < input.length; i++)
  {
    x = input.charCodeAt(i);
    output += hex_tab.charAt((x >>> 4) & 0x0F)
           +  hex_tab.charAt( x        & 0x0F);
  }
  return output;
}

/*
 * Convert a raw string to a base-64 string
 */
function rstr2b64(input)
{
  try { b64pad } catch(e) { b64pad=''; }
  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  var output = "";
  var len = input.length;
  for(var i = 0; i < len; i += 3)
  {
    var triplet = (input.charCodeAt(i) << 16)
                | (i + 1 < len ? input.charCodeAt(i+1) << 8 : 0)
                | (i + 2 < len ? input.charCodeAt(i+2)      : 0);
    for(var j = 0; j < 4; j++)
    {
      if(i * 8 + j * 6 > input.length * 8) output += b64pad;
      else output += tab.charAt((triplet >>> 6*(3-j)) & 0x3F);
    }
  }
  return output;
}

/*
 * Convert a raw string to an arbitrary string encoding
 */
function rstr2any(input, encoding)
{
  var divisor = encoding.length;
  var i, j, q, x, quotient;

  /* Convert to an array of 16-bit big-endian values, forming the dividend */
  var dividend = Array(Math.ceil(input.length / 2));
  for(i = 0; i < dividend.length; i++)
  {
    dividend[i] = (input.charCodeAt(i * 2) << 8) | input.charCodeAt(i * 2 + 1);
  }

  /*
   * Repeatedly perform a long division. The binary array forms the dividend,
   * the length of the encoding is the divisor. Once computed, the quotient
   * forms the dividend for the next step. All remainders are stored for later
   * use.
   */
  var full_length = Math.ceil(input.length * 8 /
                                    (Math.log(encoding.length) / Math.log(2)));
  var remainders = Array(full_length);
  for(j = 0; j < full_length; j++)
  {
    quotient = Array();
    x = 0;
    for(i = 0; i < dividend.length; i++)
    {
      x = (x << 16) + dividend[i];
      q = Math.floor(x / divisor);
      x -= q * divisor;
      if(quotient.length > 0 || q > 0)
        quotient[quotient.length] = q;
    }
    remainders[j] = x;
    dividend = quotient;
  }

  /* Convert the remainders to the output string */
  var output = "";
  for(i = remainders.length - 1; i >= 0; i--)
    output += encoding.charAt(remainders[i]);

  return output;
}

/*
 * Encode a string as utf-8.
 * For efficiency, this assumes the input is valid utf-16.
 */
function str2rstr_utf8(input)
{
  var output = "";
  var i = -1;
  var x, y;

  while(++i < input.length)
  {
    /* Decode utf-16 surrogate pairs */
    x = input.charCodeAt(i);
    y = i + 1 < input.length ? input.charCodeAt(i + 1) : 0;
    if(0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF)
    {
      x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF);
      i++;
    }

    /* Encode output as utf-8 */
    if(x <= 0x7F)
      output += String.fromCharCode(x);
    else if(x <= 0x7FF)
      output += String.fromCharCode(0xC0 | ((x >>> 6 ) & 0x1F),
                                    0x80 | ( x         & 0x3F));
    else if(x <= 0xFFFF)
      output += String.fromCharCode(0xE0 | ((x >>> 12) & 0x0F),
                                    0x80 | ((x >>> 6 ) & 0x3F),
                                    0x80 | ( x         & 0x3F));
    else if(x <= 0x1FFFFF)
      output += String.fromCharCode(0xF0 | ((x >>> 18) & 0x07),
                                    0x80 | ((x >>> 12) & 0x3F),
                                    0x80 | ((x >>> 6 ) & 0x3F),
                                    0x80 | ( x         & 0x3F));
  }
  return output;
}

/*
 * Encode a string as utf-16
 */
function str2rstr_utf16le(input)
{
  var output = "";
  for(var i = 0; i < input.length; i++)
    output += String.fromCharCode( input.charCodeAt(i)        & 0xFF,
                                  (input.charCodeAt(i) >>> 8) & 0xFF);
  return output;
}

function str2rstr_utf16be(input)
{
  var output = "";
  for(var i = 0; i < input.length; i++)
    output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xFF,
                                   input.charCodeAt(i)        & 0xFF);
  return output;
}

/*
 * Convert a raw string to an array of little-endian words
 * Characters >255 have their high-byte silently ignored.
 */
function rstr2binl(input)
{
  var output = Array(input.length >> 2);
  for(var i = 0; i < output.length; i++)
    output[i] = 0;
  for(var i = 0; i < input.length * 8; i += 8)
    output[i>>5] |= (input.charCodeAt(i / 8) & 0xFF) << (i%32);
  return output;
}

/*
 * Convert an array of little-endian words to a string
 */
function binl2rstr(input)
{
  var output = "";
  for(var i = 0; i < input.length * 32; i += 8)
    output += String.fromCharCode((input[i>>5] >>> (i % 32)) & 0xFF);
  return output;
}

/*
 * Calculate the MD5 of an array of little-endian words, and a bit length.
 */
function binl_md5(x, len)
{
  /* append padding */
  x[len >> 5] |= 0x80 << ((len) % 32);
  x[(((len + 64) >>> 9) << 4) + 14] = len;

  var a =  1732584193;
  var b = -271733879;
  var c = -1732584194;
  var d =  271733878;

  for(var i = 0; i < x.length; i += 16)
  {
    var olda = a;
    var oldb = b;
    var oldc = c;
    var oldd = d;

    a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
    d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
    c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
    b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
    a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
    d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
    c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
    b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
    a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
    d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
    c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
    b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
    a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
    d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
    c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
    b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);

    a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
    d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
    c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
    b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
    a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
    d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
    c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
    b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
    a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
    d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
    c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
    b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
    a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
    d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
    c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
    b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);

    a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
    d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
    c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
    b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
    a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
    d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
    c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
    b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
    a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
    d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
    c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
    b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
    a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
    d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
    c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
    b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);

    a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
    d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
    c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
    b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
    a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
    d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
    c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
    b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
    a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
    d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
    c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
    b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
    a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
    d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
    c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
    b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

    a = safe_add(a, olda);
    b = safe_add(b, oldb);
    c = safe_add(c, oldc);
    d = safe_add(d, oldd);
  }
  return Array(a, b, c, d);
}

/*
 * These functions implement the four basic operations the algorithm uses.
 */
function md5_cmn(q, a, b, x, s, t)
{
  return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
  return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
  return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
  return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
  return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}

/*
 * Add integers, wrapping at 2^32. This uses 16-bit operations internally
 * to work around bugs in some JS interpreters.
 */
function safe_add(x, y)
{
  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
  return (msw << 16) | (lsw & 0xFFFF);
}

/*
 * Bitwise rotate a 32-bit number to the left.
 */
function bit_rol(num, cnt)
{
  return (num << cnt) | (num >>> (32 - cnt));
}

</script>

<script>
var begin = new Date();
var rand = String(Math.random());
for (var i = 0; i < 1000000; i++) {    
    hex_md5(rand);
}
var end = new Date();
document.write(end.getTime() - begin.getTime());
</script>

结果是 6216 左右，单位是毫秒，这里跑了 100 万次，那么就是说每次才 6.216 个微秒。

接下来是 SHA1

<script>
/*
 * A JavaScript implementation of the Secure Hash Algorithm, SHA-1, as defined
 * in FIPS 180-1
 * Version 2.2 Copyright Paul Johnston 2000 - 2009.
 * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
 * Distributed under the BSD License
 * See http://pajhome.org.uk/crypt/md5 for details.
 */

/*
 * Configurable variables. You may need to tweak these to be compatible with
 * the server-side, but the defaults work in most cases.
 */
var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */

/*
 * These are the functions you'll usually want to call
 * They take string arguments and return either hex or base-64 encoded strings
 */
function hex_sha1(s)    { return rstr2hex(rstr_sha1(str2rstr_utf8(s))); }
function b64_sha1(s)    { return rstr2b64(rstr_sha1(str2rstr_utf8(s))); }
function any_sha1(s, e) { return rstr2any(rstr_sha1(str2rstr_utf8(s)), e); }
function hex_hmac_sha1(k, d)
  { return rstr2hex(rstr_hmac_sha1(str2rstr_utf8(k), str2rstr_utf8(d))); }
function b64_hmac_sha1(k, d)
  { return rstr2b64(rstr_hmac_sha1(str2rstr_utf8(k), str2rstr_utf8(d))); }
function any_hmac_sha1(k, d, e)
  { return rstr2any(rstr_hmac_sha1(str2rstr_utf8(k), str2rstr_utf8(d)), e); }

/*
 * Perform a simple self-test to see if the VM is working
 */
function sha1_vm_test()
{
  return hex_sha1("abc").toLowerCase() == "a9993e364706816aba3e25717850c26c9cd0d89d";
}

/*
 * Calculate the SHA1 of a raw string
 */
function rstr_sha1(s)
{
  return binb2rstr(binb_sha1(rstr2binb(s), s.length * 8));
}

/*
 * Calculate the HMAC-SHA1 of a key and some data (raw strings)
 */
function rstr_hmac_sha1(key, data)
{
  var bkey = rstr2binb(key);
  if(bkey.length > 16) bkey = binb_sha1(bkey, key.length * 8);

  var ipad = Array(16), opad = Array(16);
  for(var i = 0; i < 16; i++)
  {
    ipad[i] = bkey[i] ^ 0x36363636;
    opad[i] = bkey[i] ^ 0x5C5C5C5C;
  }

  var hash = binb_sha1(ipad.concat(rstr2binb(data)), 512 + data.length * 8);
  return binb2rstr(binb_sha1(opad.concat(hash), 512 + 160));
}

/*
 * Convert a raw string to a hex string
 */
function rstr2hex(input)
{
  try { hexcase } catch(e) { hexcase=0; }
  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
  var output = "";
  var x;
  for(var i = 0; i < input.length; i++)
  {
    x = input.charCodeAt(i);
    output += hex_tab.charAt((x >>> 4) & 0x0F)
           +  hex_tab.charAt( x        & 0x0F);
  }
  return output;
}

/*
 * Convert a raw string to a base-64 string
 */
function rstr2b64(input)
{
  try { b64pad } catch(e) { b64pad=''; }
  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  var output = "";
  var len = input.length;
  for(var i = 0; i < len; i += 3)
  {
    var triplet = (input.charCodeAt(i) << 16)
                | (i + 1 < len ? input.charCodeAt(i+1) << 8 : 0)
                | (i + 2 < len ? input.charCodeAt(i+2)      : 0);
    for(var j = 0; j < 4; j++)
    {
      if(i * 8 + j * 6 > input.length * 8) output += b64pad;
      else output += tab.charAt((triplet >>> 6*(3-j)) & 0x3F);
    }
  }
  return output;
}

/*
 * Convert a raw string to an arbitrary string encoding
 */
function rstr2any(input, encoding)
{
  var divisor = encoding.length;
  var remainders = Array();
  var i, q, x, quotient;

  /* Convert to an array of 16-bit big-endian values, forming the dividend */
  var dividend = Array(Math.ceil(input.length / 2));
  for(i = 0; i < dividend.length; i++)
  {
    dividend[i] = (input.charCodeAt(i * 2) << 8) | input.charCodeAt(i * 2 + 1);
  }

  /*
   * Repeatedly perform a long division. The binary array forms the dividend,
   * the length of the encoding is the divisor. Once computed, the quotient
   * forms the dividend for the next step. We stop when the dividend is zero.
   * All remainders are stored for later use.
   */
  while(dividend.length > 0)
  {
    quotient = Array();
    x = 0;
    for(i = 0; i < dividend.length; i++)
    {
      x = (x << 16) + dividend[i];
      q = Math.floor(x / divisor);
      x -= q * divisor;
      if(quotient.length > 0 || q > 0)
        quotient[quotient.length] = q;
    }
    remainders[remainders.length] = x;
    dividend = quotient;
  }

  /* Convert the remainders to the output string */
  var output = "";
  for(i = remainders.length - 1; i >= 0; i--)
    output += encoding.charAt(remainders[i]);

  /* Append leading zero equivalents */
  var full_length = Math.ceil(input.length * 8 /
                                    (Math.log(encoding.length) / Math.log(2)))
  for(i = output.length; i < full_length; i++)
    output = encoding[0] + output;

  return output;
}

/*
 * Encode a string as utf-8.
 * For efficiency, this assumes the input is valid utf-16.
 */
function str2rstr_utf8(input)
{
  var output = "";
  var i = -1;
  var x, y;

  while(++i < input.length)
  {
    /* Decode utf-16 surrogate pairs */
    x = input.charCodeAt(i);
    y = i + 1 < input.length ? input.charCodeAt(i + 1) : 0;
    if(0xD800 <= x && x <= 0xDBFF && 0xDC00 <= y && y <= 0xDFFF)
    {
      x = 0x10000 + ((x & 0x03FF) << 10) + (y & 0x03FF);
      i++;
    }

    /* Encode output as utf-8 */
    if(x <= 0x7F)
      output += String.fromCharCode(x);
    else if(x <= 0x7FF)
      output += String.fromCharCode(0xC0 | ((x >>> 6 ) & 0x1F),
                                    0x80 | ( x         & 0x3F));
    else if(x <= 0xFFFF)
      output += String.fromCharCode(0xE0 | ((x >>> 12) & 0x0F),
                                    0x80 | ((x >>> 6 ) & 0x3F),
                                    0x80 | ( x         & 0x3F));
    else if(x <= 0x1FFFFF)
      output += String.fromCharCode(0xF0 | ((x >>> 18) & 0x07),
                                    0x80 | ((x >>> 12) & 0x3F),
                                    0x80 | ((x >>> 6 ) & 0x3F),
                                    0x80 | ( x         & 0x3F));
  }
  return output;
}

/*
 * Encode a string as utf-16
 */
function str2rstr_utf16le(input)
{
  var output = "";
  for(var i = 0; i < input.length; i++)
    output += String.fromCharCode( input.charCodeAt(i)        & 0xFF,
                                  (input.charCodeAt(i) >>> 8) & 0xFF);
  return output;
}

function str2rstr_utf16be(input)
{
  var output = "";
  for(var i = 0; i < input.length; i++)
    output += String.fromCharCode((input.charCodeAt(i) >>> 8) & 0xFF,
                                   input.charCodeAt(i)        & 0xFF);
  return output;
}

/*
 * Convert a raw string to an array of big-endian words
 * Characters >255 have their high-byte silently ignored.
 */
function rstr2binb(input)
{
  var output = Array(input.length >> 2);
  for(var i = 0; i < output.length; i++)
    output[i] = 0;
  for(var i = 0; i < input.length * 8; i += 8)
    output[i>>5] |= (input.charCodeAt(i / 8) & 0xFF) << (24 - i % 32);
  return output;
}

/*
 * Convert an array of big-endian words to a string
 */
function binb2rstr(input)
{
  var output = "";
  for(var i = 0; i < input.length * 32; i += 8)
    output += String.fromCharCode((input[i>>5] >>> (24 - i % 32)) & 0xFF);
  return output;
}

/*
 * Calculate the SHA-1 of an array of big-endian words, and a bit length
 */
function binb_sha1(x, len)
{
  /* append padding */
  x[len >> 5] |= 0x80 << (24 - len % 32);
  x[((len + 64 >> 9) << 4) + 15] = len;

  var w = Array(80);
  var a =  1732584193;
  var b = -271733879;
  var c = -1732584194;
  var d =  271733878;
  var e = -1009589776;

  for(var i = 0; i < x.length; i += 16)
  {
    var olda = a;
    var oldb = b;
    var oldc = c;
    var oldd = d;
    var olde = e;

    for(var j = 0; j < 80; j++)
    {
      if(j < 16) w[j] = x[i + j];
      else w[j] = bit_rol(w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16], 1);
      var t = safe_add(safe_add(bit_rol(a, 5), sha1_ft(j, b, c, d)),
                       safe_add(safe_add(e, w[j]), sha1_kt(j)));
      e = d;
      d = c;
      c = bit_rol(b, 30);
      b = a;
      a = t;
    }

    a = safe_add(a, olda);
    b = safe_add(b, oldb);
    c = safe_add(c, oldc);
    d = safe_add(d, oldd);
    e = safe_add(e, olde);
  }
  return Array(a, b, c, d, e);

}

/*
 * Perform the appropriate triplet combination function for the current
 * iteration
 */
function sha1_ft(t, b, c, d)
{
  if(t < 20) return (b & c) | ((~b) & d);
  if(t < 40) return b ^ c ^ d;
  if(t < 60) return (b & c) | (b & d) | (c & d);
  return b ^ c ^ d;
}

/*
 * Determine the appropriate additive constant for the current iteration
 */
function sha1_kt(t)
{
  return (t < 20) ?  1518500249 : (t < 40) ?  1859775393 :
         (t < 60) ? -1894007588 : -899497514;
}

/*
 * Add integers, wrapping at 2^32. This uses 16-bit operations internally
 * to work around bugs in some JS interpreters.
 */
function safe_add(x, y)
{
  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
  return (msw << 16) | (lsw & 0xFFFF);
}

/*
 * Bitwise rotate a 32-bit number to the left.
 */
function bit_rol(num, cnt)
{
  return (num << cnt) | (num >>> (32 - cnt));
}

</script>

<script>
var begin = new Date();
var rand = String(Math.random());
for (var i = 0; i < 1000000; i++) {    
    hex_sha1(rand);
}
var end = new Date();
document.write(end.getTime() - begin.getTime());
</script>

结果是 8184，比 MD5 慢一点点，每个是 8.184 个微秒

附上我的机器配置：

OS 名称 Microsoft Windows 7 专业版版本 6.1.7601 Service Pack 1 内部版本 7601 系统类型 X86-based PC 处理器 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz，3201 Mhz，4 个内核，4 个逻辑处理器总的物理内存 3.34 GB

来自系统信息工具

浏览器是 chrome 26.0.1410.43 m，对应的 Javascript 引擎是 V8 3.16.14.9

-———————————————————————————–

2013-04-03 15:24:57 update IE 9 下的时间分别是 MD5 15658 ，SHA1 26091

bootstrap 上手

Fri, 16 Nov 2012 13:19:26 +0800

给自己放了一个月的假，闲着其实也挺无聊，休息的差不多，也是时候重新回来写代码了，试了一下 bootstrap，挺好的东西，山寨了一个精简微博，效果如图

表示其中头像使用的是埕cici 的头像，因为实在欢乐，有助于身心健康，所以拿过来用了，哈哈

下面看代码，其实代码结构很清晰，文档的话看这里，http://twitter.github.com/bootstrap/base-css.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>山寨牌微博</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			body {
				padding-top: 60px;
			}
			.weibo-content-li {
				margin-top: 30px;
				padding-bottom: 20px;
				border-bottom: 1px solid #eee;
			}
			.weibo-content-avatar {
				width:120px;
			}
			.sidebar-nav {
				margin-top:50px;
			}
		</style>
	</head>
	<body>
		<div class="navbar navbar-fixed-top navbar-inverse">
			<div class="navbar-inner">
				<div class="container">
		    		<a href="#" class="brand">山寨牌微博</a>
		    		<ul class="nav">
		    			<li class="active"><a href="#">首页</a></li>
		    			<li><a href="#">广场</a></li>
		    		</ul>
			 		<form class="navbar-search">
						<input type="text" class="search-query" placeholder="搜索" />
					</form>
					<ul class="nav pull-right">
						<li><a href="#">ZRJ</a></li>
						<li><a href="#">退出</a></li>
					</ul>
		 		</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="span7 offset1">
					<form>
						<textarea class="span7"></textarea>
						<div class="row">
								<input type="submit" class="btn btn-primary pull-right" value="发表微博" />
						</div>
					</form>
					<ul class="unstyled">
						<li class="weibo-content-li">
							<div class="row">
								<div class="span1">
									<img src="avatar.jpg" class="weibo-content-avatar" />
								</div>
								<div class="span6">
									<p><a href="#">@ZRJ</a>：this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, </p>
									<div>
										<span><a href="#">2012-11-16 12:52:54</a> | 来自<a href="#">手机客户端</a></span>
										<span class="pull-right"><a href="#">转发(3)</a> | <a href="#">收藏</a> | <a href="#">评论(2)</a></span>
									</div>
								</div>
							</div>
						</li>
						<li class="weibo-content-li">
							<div class="row">
								<div class="span1">
									<img src="avatar.jpg" class="weibo-content-avatar" />
								</div>
								<div class="span6">
									<p><a href="#">@ZRJ</a>：this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, </p>
									<div>
										<span><a href="#">2012-11-16 12:52:54</a> | 来自<a href="#">手机客户端</a></span>
										<span class="pull-right"><a href="#">转发(3)</a> | <a href="#">收藏</a> | <a href="#">评论(2)</a></span>
									</div>
								</div>
							</div>
						</li>
						<li class="weibo-content-li">
							<div class="row">
								<div class="span1">
									<img src="avatar.jpg" class="weibo-content-avatar" />
								</div>
								<div class="span6">
									<p><a href="#">@ZRJ</a>：this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, </p>
									<div>
										<span><a href="#">2012-11-16 12:52:54</a> | 来自<a href="#">手机客户端</a></span>
										<span class="pull-right"><a href="#">转发(3)</a> | <a href="#">收藏</a> | <a href="#">评论(2)</a></span>
									</div>
								</div>
							</div>
						</li>
					</ul>
					<div class="pagination pagination-centered">
					  <ul>
					    <li><a href="#">←</a></li>
					    <li><a href="#">1</a></li>
					    <li><a href="#">2</a></li>
					    <li><a href="#">3</a></li>
					    <li><a href="#">4</a></li>
					    <li><a href="#">→</a></li>
					  </ul>
					</div>
				</div>
				<div class="span2 offset1">
					<img src="avatar.jpg" alt="avatar" />
					<ul class="nav nav-pills nav-stacked sidebar-nav">
			        	<li class="active"><a href="#">我的首页</a></li>
			       		<li><a href="#">@提及我</a></li>
			        	<li><a href="#">我的评论</a></li>
			        	<li><a href="#">我的收藏</a></li>
			      	</ul>
				</div>
			</div>
		</div>
	</body>
</html>

iframe 中元素的居中问题

Fri, 10 Aug 2012 00:07:19 +0800

今晚在折腾 iframe 中元素的居中问题，问题是这样的：在腾讯开放平台上的应用，嵌入平台是使用 iframe 的方式，当一个应用的高度比较长的时候，需要滚动屏幕，那么有两种选择，一种是父级窗口不产生滚动条，在子框架上产生滚动条，另外一种，就是及时的加长 iframe 框架的高度，让框架能够容纳里面的全部内容，从而子框架上可以不出现滚动条，那么就是父级窗口出现滚动条。

问题出在使用的一个叫 fancybox 的 jquery 插件上，这个插件的作用是生成一个浮层，可以用来显示一些图片组啊，或者地图，或者外部视频等等之类的内容，应该说，这个插件还是不错的，只可惜我们应用的场景比较奇葩。他生成的浮层窗口，是相对于当前页面的可视窗口部分居中的，这个特性在一般的情况下没有问题，但是，如果页面是被嵌在一个 iframe 中的话，那么，就会造成他计算出错，从而，浮层窗口是生成在框架页面的中间，如果框架页面很长的话，就会造成浮层窗口父级窗口的可视窗口以下，需要滚动父级窗口才能看到。

我本身前端也就是水一水的水平，遇到问题大概想了想，没有什么非常有把握的思路，于是就 google ，看到这里有讨论，https://groups.google.com/forum/?fromgroups#!topic/fancybox/KPq4mAQn2qc%5B1-25%5D，这位仁兄给了一个方法

I have the same problem: a page includes an iframe that is pretty long and scrollable and inside that iframe I open a fancybox (which also includes yet another iframe, but this is irrelevant here). Fancybox calculates the center of the iframe inside which it has to display itself and positions quite low on the screen because the iframe is long. I’d like it to be positioned in the center of the browser viewport instead. What I found to (somewhat) work is to use this callback when defining the attributes of fancybox (using version 1.3.1):

'onComplete': function() {
                            $("#fancybox-wrap").css({
                            'top':'10px',
                            'left':'10px'
                    })}

It works - moves the fancybox where I want it inside the iframe, but one problem is that it first shows it in the original position and then repositions it which is mildly annoying. I haven’t found a good way to show it in the position I want it when it first gets drawn. Replacing ‘onComplete’ with ‘onStart’ doesn’t do anything. I guess one way would be to have somehow make it invisible on onStart and then make it visible on onComplete when it has been repositioned. Any suggestions would be appreciated!

思路倒也算是清晰易懂，可惜随后就被楼下的另一位仁兄踢馆了，囧

Not that obvious. http://fancybox.net/faq No. 3 also says : “……. You can modify FancyBox source to suit your needs” And a fellow fancybox fan did try modifying it to his needs … see below copy of the email (that I haven’t tried it yet but it makes sense to me)

>forget about the iframe: Basically it >would be great if we had another >two public attributes …etc let’s the developer answer what he thinks of your suggestions

***copy of email ************** hi JFK it work, ive tried it using just a simple tweak, using the on load example $(“a.sample”).trigger(“click”);

here what ive done;

in my iframe page i called the parent window with the href e.g. onClick=“callMe(‘www.google.com’)” or if pics “/images/pics.png”

and call this script in my parent page

in my parent html we right a decoy link (this one is from the example on load fancybox) ******

这里牵扯到要修改父级窗口，这个在我们这个案例里自然是行不通的，而且我也没怎么看懂他的思路，不过我确实试了试前面的方法，是真的不行的，浮层窗口在单步调试可以被设置到上面来，但是一往下运行就又被自动居中了。

于是没办法，仔细的看了看插件的官网，http://fancybox.net/api ，api 文档，连后面的 tops 和 tricks 都看完了，还是没有解决问题，在官方的 FAQ 里面说道，

3. Can the script be called from an iframe?

This is not supported as FancyBox is attached to page body. You can modify FancyBox source to suit your needs

于是打算换一个思路，既然父级滚动条变化的时候，我们需要重新定位浮层窗口，那么直接取父级滚动条的属性就行了吧，甚至可以给父级窗口的滚动条上一个 OnScroll 事件，在这里看到类似的思路，http://hi.baidu.com/bing2liuliu/item/5de3b80a914e41ee359902af ，可惜，试了一下，好像是不行的，于是上线问了问金泉，金泉给了官方的 js 的 sdk 的文档，http://wiki.open.qq.com/wiki/API%E5%88%97%E8%A1%A8 ，在其中有一个 api 是 http://wiki.open.qq.com/wiki/fusion2.canvas.getClientRect ，应该就是他了，不过，悲剧的在服务器上写代码，vim 用起啦真是各种痛苦啊，改着改着，代码就在 chrome 下乱了，明明页面上是有东西的，在 script 标签下居然变空白了，

而且单步跟也诡异

首先是在这里

按理说，单步下去，应该到下一个断点啊，但是，。。。。

神奇的地球还没完，继续单步，

让人不得不感叹，绳命，是入刺的井猜

历史评论

ldpcm3 (2013-04-18 18:45:23):

你好，请问这个问题，你后来解决了吗？

ZRJ (2013-04-19 09:22:53):

呃，不好意思，这个过去太久了。印象中后来是绕开了这个问题，找了另外一种实现，不过我现在基本不怎么写前端 JS 了，所以也不清楚这个问题现在有没有解法，不好意思哈