html 代码 ：
复制代码代码如下:
<! Doctype html>
<Html>
<head>
<Title> judul halaman </iteme>
<type style = "text/css">
*{font-family: consolas; font-style: italic}
.responseBox {width: 900px; margin: 10px auto; padding: 10px; border: 2px solid #366; border-radius: 10px 0 10px 0; Teks-Align: tengah}
Input .ResponseBox, tombol .ResponseBox {font-size: 30px; margin: 5px; padding: 5px;}
.spansuper {vertikal-align: super; font-size: 14px}
.spanbottom {vertical-align: text-bottom; font-size: 12px; margin-left: -110px}
#showbox {width: 900px; tinggi: 430px; Border: 5px solid #663; border-radius: 0 20px 0 20px; margin: 10px auto; padding: 8px; font-ukuran: 20px}
</tyle>
</head>
<body>
<div>
<h1> JavaScript Base64 Encode & Decode <span> [email protected] </span> <span> 2014-12-27 17:44 </span> </h1>
<input type = "text" id = "input">
<input type = "centang kotak" id = "kotak centang" checked = "checked"> base64 </input>
<tombol id = "btn"> Convert Done! </button>
</div>
<Div id = "showbox"> </div>
</body>
<type skrip = "Teks/JavaScript">
/*javascript 知识 ：
?
*正则表达式清除首位空格 ： _string.replace (/(^/s*) | (/s*$)/g, "");
*
*Covertbase64orString 自执行函数
*inputid 输入框 id
*CHECKBOXID 选择框 ID
*btnid 按钮 id
*ShowID HTML 显示容器 ID ， 这里是一个 Div#showbox
*/
(Function CovertBase64orString (InputID, CheckBoxID, BTNID, ShowID) {
var centang kotak = document.geteLementById (centang kotak); // html dom pilih kotak centang
var chkvalue = checkbox.getAttribute ("checked"); // html dom pilih checkedValue
var btn = document.geteLementById (btnid); // HTML DOM Pilih Tombol ID
var isbase64; // base64tostring atau stringtobase64 bool
var returnval = null; // string yang dikonversi
chkvalue == "diperiksa"? isbase64 = true: isBase64 = false; // 判断 Periksa 按钮初始化状态 赋值 isbase64
centang kotak.addeventListener ("klik", fungsi (e) {// kotak centang 点击事件注册
var _ckvak = checkbox.getAttribute ("checked"); // 点击事件发生时 ， 改变 Periksa 状态 ， 赋值 isbase64
if (_ckvak == "diperiksa") {
kotak centang.setAttribute ("checked", null);
isbase64 = false;
} kalau tidak {
centang kotak.setAttribute ("checked", "checked");
isbase64 = true;
}
}, BENAR);
btn.addeventListener ("klik", fungsi (e) {// tombol 点击事件注册
var _show = document.getElementById (showId); // html dom pilih showbox id
var _inputValue = document.getElementById (inputId) .value; // 文本框取值
//_inputValue=_inputValue.replace(/(^/s*)|(/s*$)/g, ""); // 正则表达式去除首位空格 ， 似乎 btoa ， abob 已经做了这些工作
var _showlength = _show.childnodes.length; // 遍历 Showbox ， 清除 Showbox 内容
while (_showlength> 0) {
_show.removechild (_show.childnodes [_showlength - 1]);
_showlength--;
}
if (isBase64) {// string ke base64 ， 支持中文编码 ， unescape ， encodeuricomponent
returnVal = window.btoa (unescape (encodeuricomponent (_inputValue))));
} else {// base64 ke string
returnVal = decodeuricomponent (Escape (window.atob (_inputValue)));
}
_show.appendChild (document.createTextNode (returnVal)); // Tambahkan konteks ke showbox
}, BENAR);
}) ("input", "kotak centang", "btn", "showbox");
// covertbase64orString ("input", "centang kotak", "btn", "showbox");
</script>
</html>
效果 ：
推荐一个 Ide javascript 比 aptana 还好用。komodo ide （免费版 ： Komodo edit ， 基本功能一样）支持语法高亮 ， 智能感知 ， 还支持 Perl ， python ， ruby ， nodejs 语法等。