chrome拖拽时的cursor问题。

在chrome中拖拽元素,鼠标会变为文本的样子,设置css的cursor无济于事。 解决方案是: ele.onselectstart=function(e){ e.preventDefault(); e.stopPropagation(); }

常用JS函数(4)

H.event.cancle = function(event) { if (event && event.stopPropagation) { event.stopPropagation(); } else { window.event.cancleBubble = true; } return false; } H.event.stop = function(event) { if (event && event.preventDefault) { event.preventDefault(); } else { window.event.returnValue = false; } } H.range.save=function(){ if (window.getSelection) { var sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { return sel.getRangeAt(0); } } ...Read More

你想不到的等式: []==![]

第一眼看到这个标题,[]==![] ,估计想到的都是false吧。 但是alert([]==![]) ,会神奇的发现,它居然是true。这到底是怎么回事呢? 首先,分解一下这个表达式。 []==![]  由以下几步完成判断。 1、求值![] 2、参考ECMAScript文档(以下简称文档)11.4.9  Logical NOT Operator ( ! ) ,!运算符首先对[]进行toBoolean([])操作,文档9.2中得知,如果参数是Object,则返回true。于是  ![] 最后 得值 false 3、表达式变为[]==false 4、参考文档11.9.3 The Abstract Equality Comparison Algorithm,根据规则,第七条 If Type(y) is Boolean, return the result of the comparison x == ToNumber(y). 由于我们的右边的是个布尔值,所以对false进行toNumber(false)操作,文档9.3 ToNumber中,可知如果是false,那么toNumber返回0 5、表达式变为[]==0 6、继续看文档11.9.3,我们来到了第九条:9. If Type(x) is Object and Type(y) is either String or Number,return ...Read More

零基础开始WebSocket(3)—-简单的聊天室程序

客户端: <!DOCTYPE html> <html> <head> <title></title> <style> #win{ border:1px solid #ccc; padding:20px ; color:#333; line-height:2em; } .input{ padding:10px 0px; text-align:left;} .input input{ width:200px;} </style> </head> <body> <div id=”win”></div> <div><input id=”text”><button id=”send”>发送</button><button id=”disconnect”>断开连接</button></div> <script> function log(d){ var logDiv=document.createElement(“div”); logDiv.innerHTML=d; document.getElementById(“win”).appendChild(logDiv); } //创建websocket连接 var socket=new WebSocket(“ws://localhost:12345/websocket/server.php”); //绑定连接成功事件 socket.onopen=function(){ log(“Socket ReadyState:”+socket.readyState); //socket.send(“hi”); }; //绑定接收到信息事件 socket.onmessage=function(e){ log(e.data); } //绑定关闭连接事件 ...Read More

零基础开始WebSocket(2)—-测试服务器

支持HTML5的websocket的浏览器很多。 包括 Opera,Firefox4,Chrome,Safari. 其中Firefox4和Opera的WebSocket默认没有开启,需要手动配置。在浏览器地址栏中输入about:config ,然后找到websocket这一项,把它启用。 我使用了Chrome来测试。 首先,新建一个HTML,加入几个div,来显示数据。 <!DOCTYPE html> <html> <head> <title></title> <style> #win{ border:1px solid #ccc; padding:20px ; color:#333; line-height:2em; } .input{ padding:10px 0px; text-align:left;} .input input{ width:200px;} </style> </head> <body> <div id=”win”></div> <div><input id=”text”><button id=”send”>发送</button><button id=”disconnect”>断开连接</button></div> </body> </html> <!DOCTYPE html>是HTML5的DTD,不谈了。 两个DIV,win用来显示数据,input用来存放提示框 下面写入脚本来测试socket服务器 首先是一个输出的函数 log <script> function log(d){ var logDiv=document.createElement(“div”); logDiv.innerHTML=d; document.getElementById(“win”).appendChild(logDiv); } </script> ...Read More

零基础开始WebSocket(1)—-简单的socket服务器端

零基础。开始搞websocket websocket实现了即时通信,远比现在常用的长连接经济方便。 我用的socket服务器端是PHP的。 下载链接 http://www.frontendcodes.com/downloads/socket.rar 解压至本地服务器文件夹。 在server.php中 有$master  = WebSocket(“localhost”,12345);这一行,localhost是地址,12345是端口号,可以自行修改。 修改完在命令行中键入php -q 路径/server.php,例如,我的在E:\svn\sockets\ 执行命令 E:\php\php.exe -q E:\svn\sockets\server.php OK,一个简单的socket服务器搞定。

IE9给前端开发带来了什么?

虽然至今我的IE9依然不能开启flash插件,但是不得不说,IE9的到来,给web前端工作带来了很多不一样的东西。 1、HTML5 HTML5是大势所趋,HTML4以来,已经过了十多年,在这十多年里,互联网有了巨大的变化,人们越来越要求在互联网上更多的看到方便简单的应用。 为什么是HTML5? 我想说对于普通的用户来说,他们不需要HTML5,他们不在乎你到底是用什么实现的,对于他们来说这不重要。只要你能把他们需要的产品提供给他们,简单好用,这就行了。 但是浏览器厂商需要HTML5,至少他们有了新目标,新功能,更重要的是,浏览器不想要一个独立于自己控制之外的FLASH。 无论怎么吐槽,HTML5终于来了。虽然IE9对HTML5的支持还不是那么完善。但是至少canvas websocket,都是能让程序员激动不已的新东西。终于,所有的浏览器厂商都支持HTML5了,虽然,我们还有IE6 IE7 IE8,但是它们迟早都要被IE9替代的不是? 2、标准 还记得那些代码吗? attachEvent 和 addEventListener , window.event和e , event.srcElement和event.target 是的是的,很多很多的IE专用,IE专有。我们的代码有很大的精力,浪费在了浏览器兼容上。即便如此,还有很多很多的BUG无法解决。例如 attachEvent里的this。。 现在这都是过去式了,IE9拥抱了W3C,使得一套代码,可以在不同的浏览器都可以正常的运行。 这使得前端开发者们,可以从修修补补中摆脱出来,把精力放在真正的代码编写上。 还记得以前对后端开发者的嗤之以鼻吗? “你们的代码写一套就可以运行,我们前端可不是这样”,这也变成过去了,那些浏览器兼容知识,也许在不久的将来就变成废品。时代在进步,不是吗? 3、效率 我的一个朋友有个冷笑话。他说:“IE虽然这个不好那个不好,但是它有一条很重要的优点,那就是稳定。你看它一直都这么慢”,“慢”是IE的代表了。 同样的一段代码,在IE中,运行的就不流畅,同样的几个操作,在IE中就会内存溢出。 在IE9中,他们很大程度上的解决了这个问题。IE9甚至支持硬件加速。在sunspider之类的测试中,IE9终于赶得上其他的浏览器了。 加油!IE! 最后: 最后,HTML5来了,大型的web应用的时代到来了,你准备好了吗?还在为IE6的layout bug纠结吗?多看看吧,世界不一样了!

Hello IE9

整个安装无任何阻扰——当然,我关了所有东西,因为我在卸载MSSQL过程中,正无聊。不过猫给我的x86包是装不了的,我是x64的win7,找了个x64的包,安装很顺利。 到这里来主要是看我的canvas代码在IE9下的运行情况的。电子表那个毫秒部分有点顿。 然后,为毛这个编辑区域在IE9下无法用鼠标选取文字呢?我猜测WP的文本编辑器是基于div的。这就完球了? 其实刚才我想好好夸IE9来着。 然后,在我纠结于这个无法选取的问题时,假死了一下,草稿没存上,突然就全没了。我现在怀疑能不能够顺利提交这篇文章。 不过我对整个安装过程感觉还行,运行么 ……至少现在还没挂。一些细节的变化我不是很在意,因为浏览器就是靠这些东西栓人的。 为了Canvas,为了HTML5,我还是欢迎IE9的到来。

IE9,你真让人失望!

3月15日,晚上,安装了IE9,系统是win7 sp1,安装过程很扯淡,很差劲。 首先,连接到微软的IE9下载页,居然还分WIN7 32和win7 64版本的。初级用户根本无所适从。 然后,下载安装,提示我一大堆软件需要强制关闭,好吧,你IE关闭自己的也就算了,QQ,chrome关你安装哪门子事啊,我还是用chrome下载你的安装包呢! 安装结束,提示我文件需要更新,于是,我又重启了一次电脑。这安装,破事怎么这么多啊! 第一次启动IE9,感觉界面很清爽。以前的菜单栏也不见了,地址栏固定到了左上,tab在地址栏的右侧,也许是习惯了chrome,感觉地址栏有点太短了。 打开第一个网页,news.qq.com,问题出现了,浏览器崩溃,IE9就这么不给面子,第一次启动就崩溃了?这给人的体验太差了,不知道哪里出现了问题,上网查吧,于是又掏出了chrome(再次鄙视你,IE9),网上没啥信息,有说迅雷插件的问题,我禁用了也没用啊!照样崩溃。唉,为了尝鲜,只好一个一个的找,过了10分钟,终于发现,禁用了flash插件后,IE9工作正常了。但是我想,那是因为我是做web开发的,普通用户的话,已经卸载了吧,呵呵。 这就是IE9给我第一印象。

Canvas绘制液晶电子表

注意几个函数的用法: ctx.save ctx.restore ctx.translate ctx.setTransform 点击查看:canvas_test2