JS/DHTML/CSS
文章平均质量分 53
cuixiping
总想着能有时间就写些小游戏玩,总是没有那么多时间,时间去了哪呢?
展开
-
“被解码的 URI 不是合法的编码” 的问题解决
同事用prototype.js做ajax应用的时候,因GET请求中含有中文参数导致脚本运行时总是提示“被解码的 URI 不是合法的编码”,来问我求解。这个问题跟url编码有关是肯定的了,但具体调试中,却还是碰了些麻烦,走了点弯路,好在还是顺利解决了。同事试了直接传未编码的中文参数,不行;又试了escape编码,不行。我想,换个URLEncode函数应该就OK了吧,没想到还是不行,错误依旧。经过一原创 2007-08-03 07:41:00 · 16035 阅读 · 6 评论 -
javascript中非常方便的进制转换
javascript下的进制转换非常方便,系统已经提供内置方法,提供2~36进制间的转型。直接提供表示的有8进制、10进制、16进制。var w=function(s){document.write(+s)};//十进制转其他var x=110;w(x);w(x.toString(8));w(x.toString(32));w(x.toString(16));//其他转十进制var原创 2007-08-27 12:30:00 · 38511 阅读 · 7 评论 -
查找两个字符串的最长公共子串的Javascript函数
New//查找两个字符串的最长公共子串 function findSubStr(s1,s2){ var S=sstr="",L1=s1.length,L2=s2.length; if(L1>L2){var s3=s1;s1=s2,s2=s3,L1=s2.length;} for(var j=原创 2009-07-01 11:54:00 · 2925 阅读 · 1 评论 -
setTimeout与setInterval在不同浏览器下的差异
setTimeout与setInterval是window对象的两个非常神奇方法,用于实现定时或延时调用一个函数或一段代码。(新手可能认为setTimeout与setInterval是javascript函数,这是错误的。新手容易将javascript对象函数与DOM对象方法混淆。) 先来一段代码,大家猜猜在各种浏览器下的结果会是怎么样的呢?function f(){ var s =原创 2010-01-24 00:59:00 · 5958 阅读 · 3 评论 -
JavaScript实现CRC32函数
JavaScript实现CRC32函数。该函数只处理ASCII字符,如需处理中文,需要先编码。原创 2010-05-26 16:52:00 · 9693 阅读 · 2 评论 -
发现一个Javascript+Canvas实现的照片人脸识别
测试: http://liuliu.me/detect/detect.html (该网址已失效,请自行下载源码测试)源码:https://github.com/liuliu/ccv/tree/unstable/js浏览器要求:支持Canvas的浏览器都可以。IE是一个杯具,据说IE9已经摆脱杯具。。。使用方法很简单,输入图片的网址,点Detect按钮就可以了。或者直接选择本地的图...原创 2010-11-09 13:31:00 · 8265 阅读 · 2 评论 -
根据生日的月份和日期,一行代码计算星座的js小函数(最简)
看到了别人写的一个计算星座的js,冗长的有点儿看不过去,就自己写个了。我想,这个函数应该足够精简了:)什么 if 啊 switch 啊 for 啊 通通滚蛋了……传入参数:month [int] 1~12; day [int] 1~31。 // 根据生日的月份和日期,计算星座。 http://blog.csdn.net/cuixiping/function g原创 2007-08-03 04:31:00 · 14370 阅读 · 7 评论 -
jQuery/Sizzle元素选择器上下文的一个陷阱的分析与解决
现有这样一段HTML: a1 b1 c1 a2 b2 c2 现在用js去查找元素jQuery$('div .a, div .b, div .c',$('#div1'))SizzleSizzle('div .a, div .b, div .c',Sizzle('#div1'))原创 2012-05-23 16:48:08 · 1758 阅读 · 1 评论 -
用Javascript实现让Canvas变模糊的效果
做Canvas应用的开发,可能会碰到需要使画面模糊的需求。容易想到三种方式:1、半透明模糊PNG 覆盖的方式,这种方式简单易行,但是不能灵活控制模糊程度。2、CSS方式,比如用-webkit-filter:blur(10px); 的形式,也极其简单,可控制模糊程度,但是这种方式的效果很差很差,中心模糊度高,四周模糊度低,而且整个元素外围会有光晕效果,已经不是真正意义的模糊了。3、原创 2012-07-17 15:35:45 · 11599 阅读 · 0 评论 -
Canvas编程练习:20几行js代码实现雷达扫描动画效果
灵感源于一不小心挖了一个陈年老贴etherdream发的《【分享】魔兽技能冷却效果(希望能有更好的思路)》的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也还不错,点这里看DEMO(1)。etherdream的原理是使用borderWidth的动态改变,可兼容非HTML5浏览器,缺点是代码较多,需要新增DOM节点,而且只能用纯色遮罩,不能实现用图片做遮罩。原创 2012-05-14 17:33:50 · 6112 阅读 · 1 评论 -
1次ajax请求(XMLHttpRequest)上传多个文件,支持进度条
封装了一个ajax多文件上传,功能就是选择多个文件,用ajax上传。调用方式也很简单,写一个json对象做为参数配置,设置要上传的服务端url以及选择文件和上传完成等的事件处理函数,new一个AjaxUploadX对象,调用selectFiles方法选择文件,调用uplaod方法上传。支持的浏览器:Firefox、Chrome、Safari、Opera使用截图:原创 2012-08-27 10:52:31 · 11548 阅读 · 6 评论 -
Javascript解析INI文件内容的函数
.ini 是Initialization File的缩写,即初始化文件,ini文件格式广泛用于软件的配置文件。INI文件由节、键、值、注释组成。根据node.js版本的node-iniparser改写了个Javascript函数来解析INI文件内容,传入INI格式的字符串,返回一个json object。 function parseINIString(data){原创 2012-09-17 11:59:05 · 6215 阅读 · 0 评论 -
9种网页动画常用实现方式总结
随着HTML5的逐步普及,在Web页上实现动画的方式也增加了,但也带来了一些兼容性问题,本文做一个总结。目前来说,没有一种方式是完美的。GIF兼容性最好,但是画质差,无交互。Canvas很火热,功能也强大,编程难度也稍高,旧IE不支持。SVG擅长处理矢量图形,交互容易,旧IE不支持。CSS3很闪亮,但功能有限,旧IE不支持。APNG, SMIL 还需看将来各浏览器的支持原创 2012-11-28 16:36:54 · 11290 阅读 · 5 评论 -
epp算法的JavaScript实现
epp是1个轻量的文本编辑软件,功能颇多,个人认为最大特色是:多标签页、多模版、自定义过滤器、自定义语法高亮。也有写陈年老毛病,比如epp里面JS正则表达式的高亮一直有bug,好多年都没修。在vscode横空出世之前,epp曾经担当我的主要工具很多年。原创 2012-12-14 17:27:41 · 2704 阅读 · 1 评论 -
HTML5 Canvas里绘制椭圆并保持线条粗细均匀的方法
Canvas里绘制椭圆是一个很常见的需求,比较新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法绘制椭圆,但是目前大多数浏览器还没有实现该方法,所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。示例代码:var ctx = document.querySelector('canvas').getContext('2d');ctx.l原创 2013-03-20 16:07:31 · 7361 阅读 · 1 评论 -
indexedDB中创建和使用索引
本文展示如何在indexedDB中创建和使用索引来优化数据查询。网上搜索到的indexedDB入门教程中,都没有介绍索引的使用,或是只带过了一下怎么创建索引,没提可以用来干什么。我在这里给出一个简洁完整的例子,示范一下indexedDB索引的使用。原创 2013-08-14 09:36:56 · 6869 阅读 · 1 评论 -
CSS多级数字序号的目录列表(类似3.3.1.这样的列表序号)
纯CSS实现类似3.3.1., 3.3.2.这样的列表序号,支持多级嵌套编号。 编写文档手册目录的时候,经常会用到这种格式。原创 2013-09-30 14:52:45 · 7381 阅读 · 2 评论 -
高效的获取当前元素是父元素的第几个子元素
例如处理事件的时候,有时候需要知道当前点击的是第几个子节点,而HTML DOM本身并没有直接提供相应的属性,需要自己来计算。对于表格TD和TR元素优先使用cellIndex和rowIndex属性。对于IE优先使用sourceIndex属性。其它情形使用previousElementSibling 或 previousSibling 进行遍历。compareDocumentPosition 方法的性能非常差。原创 2013-10-14 16:30:03 · 12087 阅读 · 0 评论 -
html中的 ol 元素的序号数字的极限
在IE, Firefox上,序号达到极限正值2147483647之后,后续的列表项的序号全部同为极限正值 2147483647 不变。在Chrome上,序号达到极限正值2147483647之后,下一个序号将变为极限负值 -2147483648, 再后续的将在这个基础上递增-2147483647, -2147483646,...原创 2013-10-14 15:16:37 · 3518 阅读 · 0 评论 -
DataURL在Web浏览器中的兼容性总结
对DataURL在Web浏览器中的兼容性做了9点总结,IE中使用data URL的限制,并附了几个实用的有关data URL的链接。原创 2013-11-06 01:40:15 · 13459 阅读 · 1 评论 -
Javascript解惑之 new A.B() 与 new A().B() 的区别
Javascript解惑之 new A.B() 与 new A().B() 的区别,这个问题涉及到的知识面是,点运算符、new运算符、函数执行这三者之间的优先级的问题。到底是点运算符优先呢,还是new运算符优先?原创 2013-11-15 01:18:09 · 6260 阅读 · 0 评论 -
Javascript TypedArray 解惑:Uint8Array 与 Uint8ClampedArray 的区别
JS的类型数组,从其构造函数名称,基本上都可以望文生义,看名字就知道怎么回事。但是有一个例外 Uint8ClampedArray ,它与 Uint8Array 颇为相似,但又有所区别。本文详细介绍这两者之间的差异,并举例说明。原创 2014-12-30 20:32:48 · 35573 阅读 · 0 评论 -
用Javascript清空(重置)文件类型的INPUT元素的值
因为安全限制,脚本不能随意设置文件域< input type=file >的value值,重置一个文件域的值,归纳起来主要有 3 种方法。本文分析这三种方法的浏览器兼容性以及优缺点,并给出一个比较完美的综合方案的代码和Demo。原创 2014-07-08 08:47:27 · 33886 阅读 · 5 评论 -
HTML5 Canvas 绘制椭圆与椭圆弧的实现
由于HTML Canvas 2D Context标准中并没有直接绘制椭圆与椭圆弧的方法,所以浏览器普遍没有这个方法,不过,Chrome支持ellipse方法。IE11,Edge, Firefox, Safari目前最新版都还不支持。所以,我们需要用JS来实现这个方法,给Context2D加上一个ellipse方法。原创 2016-06-01 19:00:33 · 11323 阅读 · 0 评论 -
DataURL与File,Blob,canvas对象之间的互相转换的Javascript
canvas转换为dataURL (从canvas获取dataURL)var dataurl = canvas.toDataURL('image/png');var dataurl2 = canvas.toDataURL('image/jpeg', 0.8);File对象转换为dataURL、Blob对象转换为dataURLFile对象也是一个Blob对象,二者的处理相同。...原创 2015-05-27 01:14:54 · 107386 阅读 · 13 评论 -
[SVG] 根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数
SVG spec 1.2以及之前的版本标准中,都只有一种绘制椭圆弧的方式,即以起点、终点、长半轴、短半轴、大小弧标记、顺逆时针方向标记、倾角为参数来确定一段弧。这个方法很强大并灵活,可绘制任意的椭圆弧。有时候我们需要计算圆弧的圆心和起始角度、结束角度,虽然标准官方文档给出了计算公式的描述,但是没有给出直接的代码。我根据标准文档以及网上的资料,写了一个Javascript函数来做这件事。根据SVG椭...原创 2012-09-08 16:12:24 · 13641 阅读 · 19 评论