浅谈console的使用

Author : lovecicy

console的简介 作为一名web前端开发，不像后端开发有各种IDE提供调试功能，最开始只能苦哈哈的用alert方法弹出消息进行调试，既麻烦又不方便。后来，Firebug以及Chrome DEVTools的出现给前端开发带来了福音，提供的console对象也极大的方便了前端开发的调试。但是console可不像我们想象中那么简单，这个对象背后的复杂用法，你未必知道。 console的基本用法 先来说说它的简单用法，想必大家每天都在用吧，尤其是console.log： console.log(‘this is a log!’); console.warn(‘this is a warning!’); console.error(‘something went wrong!’); 在平时的调试中，我几乎只用到了console.log，对于另外两个方法，几乎没有使用，因为console.log已经可以满足我的要求了。 同时，在使用console.log()时，我们可以传递多个参数，用逗号分割，它会自动将所有参数一起输出，比如： console.log(‘This is ‘, ‘a test.[Read More]

3条评论
standard

用chrome的同学，千万看好你的google密码

Author : lovecicy

前几天gmail邮箱收到100多封退信，貌似是山寨暴雪用我的账号给N多了发了欺骗邮件，送魔兽宠物。原本以为是发给我的垃圾邮件，结果发现是用我的账号发送的邮件没发送成功被google退回来了。意识到可能是我的google账号被盗以后，立马改了密码，退信这才消停了。 联想到今天chrome老是退出登陆，估计是和这件事有关，再一想，一个恐怖的念头闪过脑海，说这想法让人“毛骨悚然”也不为过。我的chrome用的是我的主力google账号登陆的，在多个设备上，chrome的自动同步功能真的是很方便。在历史记录里，我可以看到各个设备的历史记录；收藏夹自动同步，免去了在各个设备间导入导出的麻烦；主题和各种设置的同步，让各个设备上的chrome用着都一样顺手；还有，各个设备上同步的密码，却是个定时炸弹。 之前就有人说过chrome的密码明文存储有安全隐患，一旦我的google账号被盗，他只要用我的账号登陆chrome，我所有的密码都将曝露无疑。 让我们来看看如何查看你的密码： 一、点击右上角的菜单按钮，选择“设置”。 二、点击最下面的“显示高级设置”，找到“密码和表单”菜单，点击“管理已保存的密码”。[Read More]

没有评论
standard

setTimeout疑惑

Author : lovecicy

其实对于这个函数的用法，一直很模糊。 MDN的文档中，setTimeout方法有两种语法： 1. setTimeout(func,delay,arg1,arg2…) 2. setTimeout(code,delay) 返回值是一个ID，可以在clearTimeout中作为参数，用于取消这个延时函数。 对于第二种语法，其实并不推荐，原因和eval()相同。 因此来说说第一种语法，func参数为要执行的函数名，不能带括号，除非你知道自己在干嘛，也不能用引号包围，否则就变成第二种语法了；delay参数为需要延迟的毫秒数；后面的参数为传递给func的参数，但是在IE9以前的浏览器中不支持这种语法，所以更多的时候只有两个参数。 在来说说在chrome下发现的问题： 我要让下面这段代码延时执行： $(‘#test’).addClass(‘test’); 所以我写了这样一段代码： setTimeout($(‘#test’).addClass(‘test’),1000); 照例说哪个语法都不符合，但是在IE8下，它能正常执行并且不报错。在FF下，它也能执行，但是会报错：SyntaxError: m[Read More]

4条评论
standard

语音搜索，装X神器啊

Author : lovecicy

最近看了张鑫旭的一篇关于语音搜索的文章，感觉使用蛮简单的，但是够高级，够装X，于是在自己的博客上试了试。 其实代码挺简单的，添加一个input，设置两个属性，html部分就搞定了： <input id=”speechService” type=”text” x-webkit-grammer=”builtin:search” x-webkit-speech lang=”zh-CN”> 接下来就是用JS来绑定事件监听器了： var isWebkit = typeof document.webkitHidden !== “undefined”; if(isWebkit){ var s = document.getElementById(‘speechService’); s.style.display=’inline’; s.onwebkitspeechchange=function(e){ var v = this.value; if(v==”首页”){ location.href=”http://lovecicy.com”; } }; } CSS方面，我将它放在返回顶部的上方[Read More]

没有评论
standard

重置file input

Author : lovecicy

表单中经常有需要上传文件的表单项，但是这是一个比较特殊的表单控件，在各个浏览器中的呈现方式都不一样。在IE中，它的呈现方式是不可输入的输入框加按钮；在Chrome下，它的呈现方式是一个按钮加右边的文件名，如果没有文件被选中，则显示“No file chosen”。FF和IE8显示相同。 除了呈现方式不同之外，其特殊性也表现在其value属性上。因为安全性的问题，我们不能设置它的value值，甚至连读它的value值都不是我们想要的。在IE8下，读value值可以返回真实的文件路径；而在Chrome下则只能返回“C:\fakepath\”+文件名；FF下则只有文件名。 更加棘手的问题是，一旦选中了某个文件，怎么将表单项reset。在Chrome下最简单，直接再点按钮，选择cancel就可以reset了；在FF和IE8下就不行了。在Chrome和FF下，我们可以通过js将input的value设置为空来重置其值，但是在IE8下，value值无法通过js设置。 这样，当需要重置input的值的时候，就不能单纯的通过设置input的value来重置了。 如果可以的话，最简单的方法就是选择inp[Read More]

没有评论
standard

IE, FireFox, Chrome浏览器支持CSS实现Alpha半透明的方法

Author : lovecicy

在网站中， 使用半透明效果的场景很多，但是各个浏览器对于标准的支持又不一样，在网上搜索了一下，总结了下各个浏览器的实现方法。 使用下面的CSS代码，基本可以覆盖主流的浏览器： -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”; /*IE8*/ filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/ opacity: 0.3; /*Opera9.0+、Firefox1.5+、Safari、Chrome、IE9+*/ 现代浏览器都支持opacity属性，主要针对IE8及之前的IE浏览器。

没有评论
standard