南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

昨天又遇到一个奇怪的bug，就是我用js动态删除一个td，然后将另一个td的colspan变大，来填充另一个被删掉的cell，但是，在ie6、ie7下出现了问题，就是虽然我设置了colspan，但是它并没有生效，在ie的developer toolbar上看到我也设置成功了，但是为什么没生效呢？我又试着通过toolbar去设置一次，结果发现将我输入的colspan改写成了colSpan，然后生效了，于是我在脚本里也将colspan改成了colSpan，测试通过，并且在其它浏览器下都没有问题。

Code：

td.setAttribute('colSpan','2');

Demo:http://www.12sui.cn/test/td-attribute.html

所测试浏览器版本：Opera 10.10 Beta 1840、Firefox 3.5.5、Chrome 3.0.195.21、Safari 4.0.3(531.9.1)

注：在创建时，亦适用！

昨天测试过来的bug，检查了下是因为input value值的问题，因为我代码里使用的是innerHTML做的，类似这样：

el.innerHTML = '<input type="text" value="' + str + '" />';

很明显，如果str内包含”的话自然会出现问题，当时觉得蛮简单的，我用\转义一下不就行了吗？结果发现不行，原因在于，\是JavaScript的转义符，而这里是html，并不会去认JavaScript的转义符，所以，有两个办法解决这个问题，一种是使用正常的dom方法，先创建一个input，然后为input.value赋值，这里就不存在这个”的问题了，另外一种方法是使用html转义符"或者十进制的"或者其它。。。来进行转义，方法是：

el.innerHTML = '<input type="text" value="' + str.replace(/"/g,'&#34') + '" />';

Demo:http://www.12sui.cn/test/html-value-escape-0911.html

在做一个小widget时，用canvas去创建一个渐变，我又想设置其透明度，那么我就需要获取到颜色的rgba值，但是没办法去控制每一个用户正确的输入rgb值，那太困难了，相信没几个人能准确的记得住rgb值，所以，只能我这边做下转换了，本来只是Opera用，扩展了下，让目前的各个浏览器都能正常使用，当然不是统一的方法，而是根据各自的优势去处理的。Firefox、Safari、Chrome浏览器表现的最优秀，直接就给我了我想要的，Opera只能给我十六进制值，而IE更差劲，要啥没啥，杯具啊！

JS Code：

/**
 * translate color value to rgb
 * @method toRGB
 * @param {String} color value
 */
function toRGB(color) {
	//如果输入的为rgb值直接返回
	if(color.indexOf(',') != -1) {
		return color;
	}
	if(!window.getComputedStyle) {
		//ie
		if(color.indexOf('#') != -1) {
			//十六进制
			var ncolor = color.length == 4 ? ('#' + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2) + color.charAt(3) + color.charAt(3)) : color;
		} else {
			//英文名称
			var enames = {'aqua':'rgb(0, 255, 255)','black':'rgb(0, 0, 0)','blue':'rgb(0, 0, 255)','fuchsia':'rgb(255, 0, 255)','gray':'rgb(128, 128, 128)','green':'rgb(0, 128, 0)','lime':'rgb(0, 255, 0)','maroon':'rgb(128, 0, 0)','navy':'rgb(0, 0, 128)','olive':'rgb(128, 128, 0)','orange':'rgb(255, 165, 0)','purple':'rgb(128, 0, 128)','red':'rgb(255, 0, 0)','silver':'rgb(192, 192, 192)','teal':'rgb(0, 128, 128)','white':'rgb(255, 255, 255)','yellow':'rgb(255, 255, 0)'};
			return enames[color];
		}
	} else {
		//创建临时节点
		var span = document.createElement('span');
		span.style.color = color;
		document.body.appendChild(span);
		var ncolor = window.getComputedStyle(span,null).getPropertyValue('color');
		document.body.removeChild(span);
		if(!window.opera) {
			//Firefox,Safari,Chrome
			return ncolor;
		}
	}
	//ie || Opera
	var to2 = parseInt(('0x' + ncolor.slice(1)),16);
	var r = to2 >> 16,
		g = parseInt('0000000000000000' + (to2 >> 8).toString(2).slice(-8),2),
                      //g = (to2 & 0x00ff00) >> 8,
		b = parseInt('0000000000000000' + to2.toString(2).slice(-8),2);
                      //b = to2 & 0x0000ff;
	return 'rgb(' + r + ',' + g + ',' + b + ')';
}

Demo：http://www.12sui.cn/test/rgb-0911.html

注：有一点比较散的是，Safari、Chrome、Opera、IE创建临时节点后，必须插入到文档里才能获取到style值，只有Firefox不需要这么做，好散。

对未安装支付宝插件的用户，在访问淘宝登录页面时会出现假死的情况，这是由于插件检测的问题，这里提供屏蔽插件检测的userjs，以便Opera用户可以正常访问、登录。

UserJs Code:

/**
 * 淘宝登录页
 * @url http://member1.taobao.com/member/login.jhtml,http://login.taobao.com/member/login.jhtml,https://login.taobao.com/member/login.jhtml
 * @description 防止未装支付宝插件的用户在登录页面卡死，禁掉插件检测，请使用标准登录
 * 1.用户需要设置opera:config#User Prefs中的User JavaScript on HTTPS为允许(请谨慎使用！);
 * 2.用户可以使用站点首选项里的禁止插件来做到同样的效果。
 */
if(location.hostname.indexOf('member1.taobao.com') != -1 || location.hostname.indexOf('login.taobao.com') != -1) {
	window.opera.addEventListener(
		'BeforeScript',
		function(e) {
			var _s = e.element;
			!_s.src && _s.text.indexOf('window.ActiveXObject') != -1 && (_s.text = '');
		},false
	);
}

土鳖的记录下，昨天在计算昨天的时间时试着使用了new Date(new Date()*1 – 24*3600*1000)竟然可以正确的算出，当时惊讶了下哈，查了JavaScript权威指南，它的参数可以是数字（毫秒）、字符串（同Date.parse()的参数，格式必须是月日年这样子）以及（年、月、日…）等格式~

另外，无比兴奋的的是Opera 10.10 Build1840支持了Opera Widgets的导出，使其不依赖Opera运行，虽然我的Opera都是一直开着的，但是我还是很高兴Opera这一伟大决定，希望Opera Widgets成倍的增长吧，Opera 10.10 Build1840下载。

JavaScript 在日常的应用中非常的少，其实当年在大学学习C#的时候，位运算符也不是重点，而且后来考试的时候根本就没有考这章，但是对于对数字感兴趣的我，当时听的特认真，以至于虽然从来都没再看过，印象还是非常的深刻，前几天在用的时候进入了个误区，所以这里还是记录一下，巩固一下哈~

JavaScript 的位运算符一共有7个，分别是&、|、^、~、<<、>>、>>>（C#没有这个运算符，但是C#可以通过>>的逻辑右移来实现此运算），位运算的操作都是通过二进制进行的。

按位与运算符（&）

当两个数相同位都为1时返回1，否则返回0，例如1&2=0，1的二进制表示为0001，2的二进制表示为0010，二者的运算则返回0000。

按位或运算符（|）

当两个数相同位数字不同的时候返回1，否则返回0，例如1|2=3。

按位异或运算符（^）

当两个数相同位仅有一个为1的时候返回1，否则返回0，例如1^2=3。

按位非运算符（~）

~是一个一元运算符，它将所有位数取反。这里首先必须要说下负数的存储，负数是以其正数的二进制补码进行存储的，所以我们在进行负数的运算时，必须要正确的获取其二进制编码，也就是其正数的二进制补码。补码是取反然后加1来实现，下面看例子：

先计算3的反码：3的二进制形式为00000011，其反码为11111100，其补码为11111101，所以-3的二进制编码为11111101，那么我们要求~-3，就是取其反码，为00000010，这就是-3的反码，将其转化为十进制为2。

多试几个就会发现，其实一个数的反码就是其十进制的相反数减去1。

左移运算符（<<）

左移运算符就是将数的所有位集体左移，第一位变成第二位，第二位变成第三位。。。空出的新位用0补充。比如1<<2=4，-1<<2=-4。1的二进制表示为0000 0001，那么将其向左移动两位变成了0000 0100，转换为十进制就为4，-1的二进制表示为1111 1111，将其向左移动两位，得到1111 1100，1开头的为负数，将其转化为十进制则需要倒着执行一次补码的计算，就是先减去1，得到1111 1011，然后取反，得到0000 0100，转化为十进制加负号得到4。这里需要注意下二进制的减法运算法则：1-1=0-0=0，1-0=1，0-1=1（向高位借）。

这里我们可以发现左移运算就是将其十进制数乘以2的位数次方。

带符号的右移运算符（>>）

既然左移是乘以2，那么右移肯定应该是除以2了，事实上就是这样子的，如果数字本身为正数，则在高位补0，如果为负数则在高位补1。例如3>>1=1，-3>>1=-2。3的二进制编码表示为0000 0011，将其向右移动1位，得到0000 0001，转换为十进制就是1，-3的二进制编码为1111 1101，将其向右移动1位得到1111 1110，这是一个负数，负数转化为十进制，先减一得到1111 1101，取反为0000 0010，得到-2。

带符号的右移运算就是将其十进制数除以2的位数次方，并舍弃余数。

无符号的右移运算符（>>>）

正数的无符号右移运算结果跟带符号的右移运算是一样的，主要是负数的无符号右移运算。它跟带符号的右移的区别就在于，不管是正数还是负数，高位都以0补充，所以对正数来说带符号和无符号的运算都是一样的，而对于负数来说则是天壤之别。例如：-1>>&gt1=2147483647，数字很恐怖是吧，看看计算过程：-1的二进制编码为1111 1111 1111 1111 1111 1111 1111 1111，将其右移1位，并补0，得到0111 1111 1111 1111 1111 1111 1111 1111，第一位为0，是正数，将其转化为十进制就是2³⁰+2²⁹+……+2⁰=2³⁰(1-1/2³¹)/(1-1/2)=2³¹-1=2147483647，这样最终得到了我们需要的结果，结果很恐怖，慎用！

位运算符的应用：

继续阅读 »

Opera UserJs Code:

/**
 * 淘宝首页
 * @url http://www.taobao.com
 * @description 屏蔽淘宝首页弹出广告
*/
if( location.hostname.indexOf('www.taobao.com') != -1 ) {
	//屏蔽新窗口广告弹出
	window.opera.addEventListener(
   		'BeforeEventListener.load',
   		function (e) {
			if(e.listener.toString().indexOf('function(){q._showAds()}') != -1) {
				e.preventDefault();
				return;
			}
   		}, false
	);

	//屏蔽右下角pop窗口
	window.opera.addEventListener(
    	'BeforeExternalScript',
    	function (e) {
			if(e.element.src.indexOf('wizard.js') != -1) {
				e.preventDefault();
				return;
			}
    	}, false
	);
}

Firefox Greasemonkey Code:

// ==UserScript==
// @name           taobao
// @namespace      tb
// @author nanzhi at www.12sui.cn
// @description    pingbi index ad
// @include        http://www.taobao.com
// @include        http://taobao.com
// ==/UserScript==

document.cookie = '_tb_defaultbackpop_=1';
document.getElementById('J_DirectionalFloat').innerHTML = '';

对Greasemonkey不甚熟悉，所以用的方法比较散~

在最近的新淘江湖项目中遇到一个诡异的问题，就是关于onblur和onclick。当时觉得很诡异，后来测试后发现更诡异。所以在此记录一下。

首先提出问题：如果我为一个input添加了一个blur事件，同时为document添加了一个click事件，那么，当input是焦点状态时，我点击其它地方，会触发哪个事件？如果两个都触发了，那么会先触发哪个事件？

按理来说，这两个事件应该都会发生的，但是，在各浏览器下测试的结果很令人不解！~

大家先看一下Demo，点吧点吧试下~

测试结果表格（不包含点击标签栏或者地址栏以及其它到浏览器外时的情况）：

尺寸原因，这里的表格可能看着不爽，可以点击这里查看美丽版！~

5、6项的测试是为了看下二者是否会有差异，结果二者是一样的，囧。从测试结果来看，对Firefox特别满意，IE的表现很令人失望，Opera和Webkit引擎的浏览器很怪异，这主要体现在第3、5、6项上~

这个问题我之前已经遇到过一次了，但是这次又忘记了，依然又犯错了，所以我必须要记录一下。

看一下这个例子：

<form name="hehe">
    <input type="checkbox" name="haha" />
</form>
<form name="hehe2">
    <input type="checkbox" name="haha" />
    <input type="checkbox" name="haha" />
</form>
<script type="text/javascript">
document.write(document.hehe.haha.length);
document.write('<br />');
document.write(document.hehe2.haha.length);
</script>

Demo地址：http://www.12sui.cn/test/dom0-0908.html

继续阅读 »

昨晚在《读者》上看到一篇文章，蛮好的，貌似叫《好机会，坏机会》，里边有一句话：

今日的社会，人人都在盼望机会——出名的机会，发财的机会，升官的机会，深造的机会。。。但你有没有想过，如果机会真的降临到你头上，你以及你身边的人的能力、品质、心胸、定力、学识，能与这个机会相匹配吗？

感触很深，想起《天龙八部》里的扫地僧，他给萧远山和慕容博常偷看的武功秘籍旁边放了该看的经书，但是，两个人都没发现，或者说根本不屑去看，所以，他们都没有什么好的造化，自身的修养不行，武功也很难再上一个高度。还记得《我们生活的年代》这个电视剧，悲剧呀。。。真的很悲，人在20w和200w面前表现出了两种截然不同的态度，在利益面前你会怎么选择呢？有些中500万彩票的人，没有去领奖，为什么呢？我想是他不知道该怎么去用，更不知道这500万会给自己的人生、家庭带来什么伤害，他还没有接受的心理。我从来没买过彩票，并不是我不想中500万，我也想，但是我现在真的没有能力去控制自己的欲望，没有能力去用好那笔钱。07年毕业之后我没接过任何单子，回绝了很多朋友的合作，并不是我不想赚钱、不需要钱，我也想买好车，买大大的房子，可是我现在还不能。我不是没有欲望，我也有，但是很多时候都被我压下来了，道行太低啦，还需要修行，男人要忍，^_^不扯了，进入正题。

继续阅读 »