我才12岁

昨天在调试bug的时候遇到一个问题，先看下代码：

<script>
var str = '2010-01-20';
alert(new Date(str.split('-').join(',')));
</script>

大家觉得这个会弹出来什么时间呢？2010年1月20日 or 2009年12月20日？。。。答案是丰富多彩的，看下在各浏览器下的情况：

继续阅读 »

昨天遇到的一个bug，开发将一个自定义属性中的一个字母写成了大写，结果造成ie浏览器下的判断失效，这里记录一下，并在其它浏览器下作了测试。

Test Code:

<div id="test" data-Maxvalue="1" style="width:300px; height:200px; border:2px solid green; margin:50px auto; padding:20px">
 此div设置自定义属性data-Maxvalue值为1.
</div>
<script type="text/javascript">
var el = document.getElementById('test');
alert(el.getAttribute('data-maxvalue'));
el.setAttribute('data-maxvalue','2');
alert(el.getAttribute('data-maxvalue'));
alert(el.getAttribute('data-Maxvalue'));
el.setAttribute('data-maxValue','2');
alert(el.getAttribute('data-maxValue'));
el.setAttribute('data-Maxvalue','2');
alert(el.getAttribute('data-maxValue'));
</script>

如果设置一个自定义属性data-Maxvalue，那么除ie外的所有浏览器都会忽略大小写而统一解析为data-maxvalue，可以用各自的developer tool查看下，而且在读取的时候也会忽略大小写，都不会造成读值、设值的问题，但是在ie浏览器下，显得非常的复杂。

在使用getAttribute读值的时候，ie会把里边的值忽略大小写，而去匹配html里的属性值，然后返回，使用setAttribute去设置的时候，ie同样会忽略大小写而去正确的设置html里的属性值，但是这个值你读不到，当你再去使用getAttribute去获取的时候，读到的依然是最初默认的值。只有你正确的书写attribute的值，并设置的时候才能正确的读取。也就是说，当你使用setAttribute去设置的时候一定要和源码里的大小写保持一致，而当你在使用getAttribute去读取的时候可以忽略其大小写。

总结：为了避免不必要的问题发生，在设置自定义属性的时候不要有大小写之分。对于html节点本身有的attribute，则应该依照ie的解析去书写，比如colSpan、rowSpan、frameBorder等等。

Demo测试地址：http://www.12sui.cn/test/attribute-ie.html

测试浏览器：IE6、IE7、IE8、Opera 10.10(Build 1893)、Firefox 3.5.6、Chrome 3.0.195.38、Safari 4.0.3(531.9.1)。

这是一个杯具！跟小虎学会了习惯用doc=document，然造成了一个杯具。。。就是在读取iframe的时候用了iframe.contentWindow.doc.body，接着就不起作用啦。。。有一点奇怪的是我改成了iframe.contentWindow[doc].body竟然也不行！只好正常点写啦：iframe.contentWindow.document.body，在此记录一下。

不能使用[doc]的原因：进入frame.contentWindow后，其实在iframe里并没有声明doc=document，所以doc在这里应该是undefined，为安全期间，建议此处使用的时候直接使用document。感谢小虎以及各位淘宝ued前端的指正哈~

昨天又遇到一个奇怪的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不甚熟悉，所以用的方法比较散~