极简的switch控件

emu — Tue, 01 Oct 2019 22:45:00 GMT

需要在html页面上用到一个switch控件，html5没有现成的，网上流传的版本都有点复杂，代码量偏大甚至有独立的css和js片段的依赖，用起来不像html控件那么简单，有一些动画之类的需求镀金也不是太必要，随手写个极简版的用着：

<pre onclick="this.c=!this.c;style.backgroundColor=c?'green':'';innerHTML=c?'on ○':'○ off'"
style="border-radius:0.7em;border:1px solid black;padding:0 0.4em;display:inline;float:right">○ offpre>

用pre控件一是为了让字体等宽避免宽度的微小变化，二是可以方便的填空格进去调整宽度而不用填

打开关闭状态可以通过读取元素的c属性，当然也可以直接用标记相应属性的全局变量来代替，免去了再读取元素属性的麻烦:

emu 2019-10-02 06:45 发表评论

整理了最近百年的藏历数据，做了个公历藏历映射的小工具

emu — Wed, 30 Jan 2019 05:34:00 GMT

@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); 过去三年一直都在每年藏历新年前设法拿到新一年的藏历数据更新到自己的一个gihub项目里面，今年临近藏历新年，却发现以往的很多藏历网站都没有更新明年的数据了，正好弄到了最近一百年的藏历数据，花了点时间全部都更新了进去，顺便申请了一个还不错的域名 zangli.pro，发布了一个新网站百年藏历，方便大家随时查询或者在自己的产品中直接引用藏历公历的换算脚本。

emu 2019-01-30 13:34 发表评论

用webcrypto做AES原生加解密

emu — Mon, 12 Jun 2017 09:48:00 GMT

今天下午和一个妹子聊到在前端做AES加密，妹子说有一些开源的库，我想webcrypto提出来这么多年，应该主流浏览器很多也应该有原生的支持了吧？写个加测试页面试试看：

DOCTYPE html>
<html>
    <head>
        <META NAME="Author" CONTENT="emu">
        <META NAME="Keywords" CONTENT="webcrypto AES-CBC AES-GCM">
    head>
    <body>
        <div id="out">div>
        <script type="text/javascript">
            function output(sign) {
                document.getElementById("out").innerHTML += sign + "
";
            }
            function bufferToHex(b){
                var dataview = new DataView(b);
                result = "";
                for (var i = 0; i < b.byteLength; i += 4) {
                    tmp = dataview.getUint32(i).toString(16);
                    result += (tmp.length == 8 ? "" : "0") + tmp;
                }
                return result;
            }

            function bufferToString(b){
                //new TextDecoder().decode(b)
                var hex=bufferToHex(b);
                var result=unescape(hex.replace(/(..)/g,"%$1"));
                return result;
            }
            function stringToBuffer(s){
                //new TextEncoder().encode(s);
                 var a = s.split("");
                 for (var i = 0; i < a.length; i++) {
                        a[i] = a[i].charCodeAt(0)
                 };
                 var result = new Uint8Array(a);
                 return result;
            }

        var textToBeEncrypted = 'Hello World!';
        var bufferToBeEncrypted=stringToBuffer(textToBeEncrypted);
        var bufferToBeDecrypted;
        var pwd="let me try this password"
        var password = stringToBuffer(pwd);
        var sAlg="AES-CBC";//AES-GCM部分浏览器不支持
        var c = window.crypto || window.msCrypto;
        var subtle = c.subtle || c.webkitSubtle;
        var iv = c.getRandomValues(new Uint8Array(16));
        var alg = { name: sAlg, iv: iv };
        var op=c.subtle.digest('SHA-256', password)
        var encryptKey,decryptKey,hash;
        if(("then" in op)){
            op.then(function(buffer){
                hash=buffer;
                c.subtle.importKey('raw', hash, alg, false, ['encrypt']).then(function(buffer){
                    encryptKey=buffer;
                    c.subtle.importKey('raw', hash, alg, false, ['decrypt']).then(function(buffer){
                    decryptKey=buffer;
                    doEncrypt(alg,encryptKey);
                    })
                })
            });
        }else{
            op.oncomplete=function(e){
                var hash=e.target.result;
                var op=c.subtle.importKey('raw', hash, alg, false, ['encrypt']);
                op.oncomplete=function(e){
                    encryptKey=e.target.result;
                    op=c.subtle.importKey('raw', hash, alg, false, ['decrypt']);
                    op.oncomplete=function(e){
                        decryptKey=e.target.result;
                        encryptWithCryptoOperation(alg,encryptKey);
                    }
                }
            }
        }
        function doEncrypt(alg,encryptKey){
            var op = c.subtle.encrypt(alg, encryptKey, bufferToBeEncrypted);
            op.then(function(buffer){
                    bufferToBeDecrypted=buffer;
                    output("pwd: "+pwd+" alg:"+sAlg+"
encrypt("+textToBeEncrypted + ")="+ bufferToHex(buffer));
                    doDecrypt(alg,decryptKey);
                })
        }

        function doDecrypt(alg,decryptKey){
            var op = c.subtle.decrypt(alg, decryptKey, bufferToBeDecrypted);
            op.then(function(buffer){
                output("pwd:"+pwd+"  alg:"+sAlg+"
decrypt("+bufferToHex(bufferToBeDecrypted) + ")="+ bufferToString(buffer));
            })
        }

        function encryptWithCryptoOperation(alg,encryptKey){
            var op = c.subtle.encrypt(alg, encryptKey);
            op.onerror=function(e){output(sAlg+"  unsupported")}
            op.process(bufferToBeEncrypted);
            op.oncomplete=function(e){
                bufferToBeDecrypted=e.target.result
                    output("pwd: "+pwd+" alg:"+sAlg+"
encrypt("+textToBeEncrypted + ")="+ bufferToHex(bufferToBeDecrypted));
                //decryptWithCryptoOperation(alg,decryptKey)
                setTimeout(decryptWithCryptoOperation,0,alg,decryptKey)
            }
            op.finish();
        }
        function decryptWithCryptoOperation  (alg,decryptKey){
            var op = c.subtle.decrypt(alg, decryptKey);
            op.onerror=function(e){(sAlg+"  unsupported")}
            op.process(bufferToBeDecrypted);
            op.oncomplete=function(e){
                if(!e.target.result){
                    output("IE is crazy!
");
                    encryptWithCryptoOperation(alg,encryptKey)
                }else
                    output("pwd:"+pwd+"  alg:"+sAlg+"
decrypt("+bufferToHex(bufferToBeDecrypted) + ")="+ bufferToString(e.target.result));
            }
            op.finish();
        }
        script>
    body>
html>

测试下来感觉各个浏览器支持程度还是参差不齐，IE11和Edge都是不同的实现方式，IE11甚至还会随机出现oncomplete的时候result数据都还没有ready的情况，甚至于有的时候完全相同的入参（包括随机数也相同）加密出来的结果居然会不同，也就是说有的时候加密算法自己会加密错，出来的结果根本就无法被正确解密，实在是个半成品：

（第一次加密错了，第二次加密对了解密错了，第三次终于加解密都对了）

（第一次加密错了，第二次对了）

emu 2017-06-12 17:48 发表评论

用优图继续优化论坛

emu — Sat, 27 Feb 2016 12:21:00 GMT

@import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(http://www.blogjava.net/CuteSoft_Client/CuteEditor/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); 上篇讲到因为经常有流量冲击，因此采用了流量结算方式。后来发现流量波动的有点不合理了，分析CDN访问日志发现，绝大多数的流量都是论坛有一些用户上传了超大图片浪费掉的，要解决这个问题，就要压缩一下图片了。腾讯云提供的解决方案是优图。老规矩，懒得修改程序，加一个rewrite：

加好后，流量唰唰唰的就掉下来了：

每天流量从20G～30G下降到1G以下，相应的优图流量也上到接近2G。

哎呀，前面买了个大流量包这下怎么用的完啊？

emu 2016-02-27 20:21 发表评论

语源科技BlogJava-emu in blogjava

极简的switch控件

整理了最近百年的藏历数据，做了个公历藏历映射的小工具

用webcrypto做AES原生加解密

用优图继续优化论坛