Javascript Base64 Encode & Decode

html代码：
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Page Title</title>
 5     <style type="text/css">
 6     *{font-family: Consolas;font-style: italic}
 7     .responsebox{width:900px;margin:10px auto;padding:10px;border:2px solid #366;border-radius: 10px 0 10px 0; text-align: center}
 8     .responsebox input,.responsebox button{font-size: 30px;margin:5px;padding:5px;}
 9     .spansuper{vertical-align: super;font-size: 14px}
10     .spanbottom{vertical-align: text-bottom;font-size: 12px;margin-left: -110px}
11     #showbox{width:900px;height:430px;border:5px solid #663;border-radius: 0 20px 0 20px;margin:10px auto;padding:8px;font-size: 20px}
12     </style>
13 </head>
14 <body>
15 <div class="responsebox">
16     <h1>Javascript Base64 Encode & Decode<span class="spansuper">veinyf@gmail.com</span><span class="spanbottom">2014-12-27 17:44</span></h1>
17     <input type="text" id="input">
18     <input type="checkbox" id="checkbox" checked="checked">Base64</input>
19     <button id="btn">Convert done !</button>
20 </div>
21 <div id="showbox"></div>
22 </body>
23 <script type="text/javascript">
24     /*javascript知识：
25      *函数：window.atob()    window.btoa()   unescape() escape() encodeURIComponent() decodeURIComponent()
26      *正则表达式清除首位空格：_string.replace(/(^s*)|(s*$)/g,"");
27      *
28      *CovertBase64orString自执行函数
29      *inputid   输入框id
30      *checkboxid    选择框id
31      *btnid 按钮id
32      *showid    html显示容器id，这里是一个div#showbox
33      */
34 (function CovertBase64orString(inputid, checkboxid, btnid, showid) {
35     var checkbox = document.getElementById(checkboxid); //html dom select checkbox
36     var chkvalue = checkbox.getAttribute("checked");    //html dom select checkedvalue
37     var btn = document.getElementById(btnid);           //html dom select button id
38     var isbase64;                                       //base64toString or StringtoBase64 bool
39     var returnval = null;                               //Converted string
40     chkvalue == "checked" ? isbase64 = true : isbase64 = false; //判断check按钮初始化状态 赋值isbase64
41     checkbox.addEventListener("click", function(e) {            //checkbox 点击事件注册
42         var _ckvak = checkbox.getAttribute("checked");          //点击事件发生时，改变check状态，赋值isbase64
43         if (_ckvak == "checked") {
44             checkbox.setAttribute("checked", null);
45             isbase64 = false;
46         } else {
47             checkbox.setAttribute("checked", "checked");
48             isbase64 = true;
49         }
50     }, true);
51     btn.addEventListener("click", function(e) {                    //button 点击事件注册
52         var _show = document.getElementById(showid);               //html dom select showbox id
53         var _inputvalue = document.getElementById(inputid).value;   //文本框取值
54         //_inputvalue=_inputvalue.replace(/(^s*)|(s*$)/g, "");    //正则表达式去除首位空格，似乎btoa，abob已经做了这些工作
55         var _showlength = _show.childNodes.length;                  //遍历showbox，清除showbox内容
56         while (_showlength > 0) {
57             _show.removeChild(_show.childNodes[_showlength - 1]);
58             _showlength--;
59         }
60         if (isbase64) {  //string to base64，支持中文编码，unescape，encodeURIComponent
61             returnval = window.btoa(unescape(encodeURIComponent(_inputvalue)));
62         } else {        //base64 to string
63             returnval = decodeURIComponent(escape(window.atob(_inputvalue)));
64         }
65         _show.appendChild(document.createTextNode(returnval));          //add context to showbox
66     }, true);
67 })("input", "checkbox", "btn","showbox");
68 //CovertBase64orString("input", "checkbox", "btn","showbox");
69 </script>
70 </html>
View Code
效果：
推荐两个个Javascript IDE ，Brackets比Aptana还好用。Komodo IDE（免费版：Komodo Edit，基本功能一样）支持语法高亮，智能感知，还支持perl，python，ruby，nodejs语法等。
Brackets