最近个项目已经加班连续加班1个月，因为公司经常有在外面客户现场或出差的情况，人事每个月初会把上个月的份考勤打卡记录全部发出来，让我们对自己的考勤，突然想到可根据大家打卡时间记录统计每天工作时间，看大家加班是否也多呢？然后使用我们现在项目用的ECharts报表来展示，做了个Web的柱状图和饼图分析...

在前段时间，已用JavaScript实现SM2算法的签名验证，下面来讲下JS的SM2算法的非对称加解密。这个在客户端加密的应用场景可能会更多些，比如我们平时登录的网站的密码，如果没有使用SSL证书加密一般会是明文传输这样会很不安全，这时可以考虑结合使用非对称算法加密，将服务器端的公钥输出在客户端，客户端使用公钥加密，登录时密码以密文方式传给服务器端再由相应私钥解密得到明文数据。

前段时间因工作需要，了解到在Github上已经有人实现了用JavaScript来写签名和验签，支持RSA、ECC、DSA等算法，还能解析X.509证书，一时觉得JavaScript是无比强大。后面就研究了下JavaScript版的ECC算法签名验证，自己再扩展实现了SM2国密算法的签名验证。 基于现有已实现的C#版SM2国密算法的签名验证，再结合原来JavaScript的ECC算法，使用JavaScript实现SM2国密算法的签名验证相对简单，只需要将C#语言翻译成JavaScript语言实现。不过中间还是遇到了些问题，主要是在JavaScript计算SM3摘要值大数的运算上还是有些不同。

看到很多大型的网站，都实现了图片延迟加载，即在浏览器的可视范围内才加载图片。这样最大的一个好处就是节约带宽提高用户体验，特别是对于访问量高的大型网站就显得尤为重要，往往大部分网站的流量都是图片大于文本内容，因此网站图片资源优化可以有很大的提升空间。

在说网站图片延迟加载前，先说下网站图片上传的处理。一般网站上传图片会保存原图，如果网站有多个尺寸规格的需要显示，还要按需生成不同大小的缩略图，这样做的好处就是之后可以快速使用访问，缺点是难以管理这些缩略图，增加了存储成本，算是“以空间换时间”。另外还有一种做法是“以时间换空间”，网站图片上传只保存原图，缩略图按需根据原图动态生成，这样会增加程序处理的一些成本，但可以换取更多空间。具体采用那种方式就因网站需要综合考虑的，目前我网站上传图片采用了比较懒的做法都只保留了原图。

 

在网上搜索了很多禁止掉浏览器后退的方法，大都是说禁用缓存或使用JS跳转。其实浏览器的后退前进按钮我们本身是无法控制的，之所以还有要禁止后退的一些功能需要，主要还是存在提交表单、身份验证等应用场景，避免用户重复提交数据等。下面我从几次层面来说明实现禁止掉浏览器后退的效果。 1.客户端JS跳转 2.禁止缓存 3.让后退停在当前页面

1.showModalDialog() 大部分浏览器已支持showModalDialog函数，我们叫它为模态对话框，它有个好处是打开之后会始终保持输入焦点，在关闭它之前父窗体是无法获取焦点，这可以阻塞用户的操作等待返回 2.showModelessDialog() showModelessDialog方法打开的窗体为非模态对话框，与showModalDialog模态对话框不同的是用户可以随便切换输入焦点，因此它不会阻塞线程等待返回结果 3.window.open() 4.兼容性 5.window.open()模拟showModalDialog() 6.小结

今天我主要讲3种不同展示的JavaScript树结构菜单，分别是悬浮层树(Tree)、右键菜单树(ContextMenu)和节点树(TreeMenu)，目前都支持无限级层次。

var ie = document.all; 在以前，如果单只是判断为IE浏览器使用document.all，它返回是文档所有元素数组，可根据数组下标或元素id、name索引元素。这里注意ff等其他非ie浏览器里并不是完全不支持document.all，在quirks模式下使用document.all.id仍然可以获取元素，只不过document.all不能被探知仍然返回false而已。 var ie = !+'\v1'; 这是一个仅仅需要7bytes的ie判断，判定借助于IE不支持\v垂直制表符。\v在正则里匹配一个垂直制表符，而在IE里不支持'\v1'被认做为'v1'，而其他浏览器则为'1'，再使用+强制转换为数字，这时IE里就为NaN而其他浏览器则为数字1，最后再加上!强值转换为Boolean类型，此时候IE里就是true而其他浏览器就是false了。 测试：alert('\v1')(ie:v1,others:1)；alert(+'\v1')(ie:NaN,others:1)；alert(!+'\v1')(ie:true,others:false)； var ie = !+[1,]; 今天在逛园子的时候，发现另外一位童孩全世界最短的IE判定真是强淫，利用了IE与标准浏览器在处理数组的toString方法的差异判定，对于标准游览器，如果数组里面最后一个字符为逗号，JS引擎会自动剔除它，而IE则不会。原来至少需要7bytes，而在今年的1月8日被一个俄国人打破了世界记录，仅仅需

继上一篇博客个性化定制功能后，今天我又花了足足一天时间，实现了使用js拖拽定制模块功能。主要包括三大块功能：1.拖拽模块；2.计算坐标位置；3.完成拖拽，保存当前布局位置。

由于工作关系，最近这两天研究了下Google地图API，要实现地图位置搜索功能，显示搜索结果并能在地图上标记下来，刚开始还考虑使用51ditu，出于搜索关键字分词等方面考虑，最后还是决定使用Google地图，一直也都是那么的崇拜谷歌的大神，这次就来体验一翻~

天气渐渐的冷了起来，冷到只打哆嗦，手插到口袋里不想出来，从未感觉广州也这么冷过，真是不想动啊。最近工作也比较忙，自己要负责一个项目，所以博客更新就没有像以前那样频繁了。 昨天设计部一同事问我要一个js取色板的功能，自己去做的话一时半会是不可能做好的，趁今天来公司比较早，就把Google大神搬出来帮他找了一下，刚开始找了几个兼容性都不是很好，而自己试着去改发现很麻烦，后台CSDN上有一个取色板的资源，不惜扣除了我2积分下载了这个资源，不过后来觉得这个js调色板着实好用，固出此文。 下载来看了它的Demo，页面很美观精致，功能也足够强大，有多种初始化调用方式。自己也写过几个简单的JavaScript类库，正好对比总结下。 1.定义一个全局的静态类或函数。 一个JavaScript类库，首先需要一个全局的静态类或活动函数，当然还可以定义更多的属性或函数，但最好都是定义在这个全局类下，而不要每一个方法或属性全部定义在window作用域下，这样会显得散乱无主次之分，至于什么时候用静态类时候用活动函数就要看具体实现的功能，一般来说页面会存在多份实例就需要使用pro

获取页面元素坐标位置： function elemOffset(elem){ var t = elem.offsetTop; var l = elem.offsetLeft; while( elem = elem.offsetParent) { t += elem.offsetTop; l += elem.offsetLeft; } return { x : l , y : t };} 调用例子： 根据鼠标event事件对象获取坐标位置： function mousePosition(e) { if(e.pageX e.pageY) { return { x : e.pageX, y : e.pageY }; } var scrollElem = (document.compatMode document.compatMode!="BackCompat")? document.documentElement : document.body; return { x: e.clientX + scrollElem.scrollLeft, y: e.clientY + scrollElem.scrollTop };} 调用例子： 整理作者：Jonllen，以上在IE、Firefor3.0、Chrome1.0、Safari4.03、Opera9.64浏览器内测试通

在线JavaScript编码和解码，整理一下JavaScript编码的一些方法实例，提供在线escape编码、unescape解码、encodeURIComponentUrl参数编码、decodeURIComponentUrl参数解码、encodeURIUrl地址编码、decodeURIUrl地址解码测试的小程序，使用escape编码能很好的解决JavaScript中文乱码，今天用TinyMce在线编辑器的时候发现的它的语言包里面的中文都是一些\u9F20开头格式的字符，后来经过验证原来这些中文字符都是经过escape编码后的，估计在读取的是再用unescape解码回来，不过tinymce语言包里面的是escape编码后把所有的%替换为了\，不知道它为什么要怎么做。关于escape、unescape、encodeURI、decodeURI、encodeURIComponent、decodeURIComponent这些编码函数使用的地方我这里就不在撰述了，网上一大把。

动态加载自己JavaScript的Ajax请求脚本文件,使用Ajax发送请求...

从今天开始记录JavaScript使用的兼容问题一、推荐获取元素的HTML代码使用innerHTML，是W3C属性兼容所有浏览器，不要使用innerText和outerHTML，因为这不是标准的属性FF内不被支持的。解决代替outerHTML方法如下：1.使用document.createElement("DIV").appendChild(parentLink.cloneNode(true)).parentNode.innerHTML;创建一个元素新元素添加到子节点后获取innerHTML即元素的outerHTML值。2.网上还有另外一种方案是给dom元素prototype自定义添加一个outerHTML属性。三、IE跟其他标准的浏览器在DOM认识处理上有个非常重大的区别，IE在获取childNodes的时候会很'人性化'把TEXT_NODE空文本节点给忽略掉，而FF等浏览器不会，但有时候我们只需要获取nodeType=1的元素节点，如果为TEXT_NODE文本节点误当元素节点设置它一些属性时会出错，一般做到兼容的办法是获取childNodes时逐一判断nodeType!=3(jquery的做法)，但是就麻烦了一点，我一般用childNodes的时候我会用document.getElementById('id').getElementsByTagName('li'),但这是在预知所有的childNodes的nodeName前提下的，如果可以控制程序动态输出所有的childNodes的时候，可预先清除所有的空格换行，这样用childNodes获取的节点就没有TEXT_NODE空文本节点了，使用firstChild、lastChild、previousSibling、p

网页版弹钢琴&&JQuery滚动的音符...

之所以说要摆脱jquery，并不是说jquery不好用，本人也是佩服jquery五体投地，在没有用上jquery的时候我还没认识到javascript如此强大的功能，好在jquery的脚本是全部开源的，在它的里面我们能够学到很多的东西。不过我看过它的源码，可能是由于本人的js水平有限还有很多地方看不是很明白，不过在使用的过程可以得知jquery之所以如此强大得意于的它封装的dom对象类，并且几乎提供一个几乎"万能"的筛选器，而封装类又提供很多方便常见的方法操作dom对象，最重要的一点是jquery帮我兼容搞定所有的浏览器，使得我们不需要再考虑为ff、opera或safari做单独的判断，所以jquery倍受程序员的青睐。jquery还能进行很好扩展，提供了很多丰富的插件，也有提供一整套UI解决方案，还算好用啦。不过可能是由于本人比较叛逆的性格，出与没事干找抽，呵呵，就是不想再用jquery，也没有啦，下面我来说一下我为什么不再想用jquery的原因： jquery脚本文件较庞大，1.2.6版没打包前有98kb，而打包后也占了31kb，但我们通常只用它其中的一个很小部分功能，感觉就有点浪费，所以没有必要把这么大的一个jquery脚本文件引用到页面； 本身的一些Bug，无论写什么东西都可能会有bug，虽然jquery是开

这个模式弹窗是我结合Jquery写的，因为有时候用Jquery的时候会造成和其他脚本有冲突。。。感觉Jquery的有些插件也不能都满足所有的需求，有些Bug不好怎么去解决；我写的也还有很多BUG，但是自己写的的也好去修复它，功能如下: 同样支持窗体缩放大小时自动居中对齐(IE下必须很秀气的resize才能正确触发)； 支持同时打开对个窗体，并能响应Esc事件和点击遮掩层进行关闭弹窗；还有很对功能待完善，目前已经加入了拖拽和缩放大小的功能，默认是false不拖拽的,在init里面可以设置drag:true以让元素可拖拽,拖拽的代码是我之前在51js上看到别人贴的,很简洁所以就直接拿过来用了...

JavaScript图片缩略图列表滚动功能。

从51js论坛上路过时，看到别人贴的一段拖拽的JS代码，很简短就几行，除开在IE6内还有点小BUG外，在IE7、FF内均运行良好，固运用过来瞧瞧~~~