浅谈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]

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]

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