HTML ： ：
复制代码代码如下:
<! Doctype html>
<html>
<Evista>
<título> Título de la página </título>
<style type = "text/css">
*{Font-Family: Consolas; Font-Style: Italic}
.ResponseBox {ancho: 900px; margen: 10px automático; relleno: 10px; borde: 2px sólido #366; border-radio: 10px 0 10px 0; Text-Align: Center}
.ResponseBox Entrada, .ResponseBox Button {Font-Size: 30px; Margin: 5px; Padding: 5px;}
.spansuper {vertical-align: super; font-size: 14px}
.spanbottom {vertical-align: text-bottom; font-size: 12px; margen-izquierda: -110px}
#showbox {ancho: 900px; altura: 430px; borde: 5px sólido #663; border-radio: 0 20px 0 20px; margen: 10px automático; relleno: 8px; font-size: 20px}
</style>
</ablo>
<Body>
<div>
<h1> JavaScript Base64 Codificar y decodificar <Span> [email protected] </span> <span> 2014-12-27 17:44 </span> </h1>
<input type = "text" id = "input">
<input type = "checkbox" id = "checkBox" checked = "checked"> base64 </input>
<botón id = "btn"> Convertir hecho! </boton>
</div>
<div id = "showbox"> </div>
</body>
<script type = "text/javaScript">
/*JavaScript 知识 ：
*函数 ： Window.atob () Window.btoa () unescape () escapar () codeuricOponent () decodeuricponent ()
*正则表达式清除首位空格 ： _string.replace (/(^/s*) | (/s*$)/g, "");
*
*CoBrTBase64orString 自执行函数
*ID de entrada 输入框 输入框
*ID de checkboxid 选择框
*BTNID 按钮 ID
*showid html 显示容器 id ， 这里是一个 div#showbox
*/
(functionBase64orString (inputid, checkboxID, btnid, showID) {
varilla de verificación var = document.getElementById (checkboxId); // casilla de verificación Seleccionar HTML DOM
var chkvalue = checkbox.getAttribute ("verificado"); // HTML DOM Seleccione CheckedValue
var btn = document.getElementById (btnid); // html DOM SELECT BOTÓN ID
var isbase64; // Base64ToString o StringTobase64 Bool
var returnval = null; // cadena convertida
Chkvalue == "Verificado"? isbase64 = true: isbase64 = false; // 判断 Verifique 按钮初始化状态 赋值 ISBase64
checkbox.addeventListener ("hacer clic", función (e) {// casilla de verificación 点击事件注册
var _ckvak = checkbox.getAttribute ("checked"); // 点击事件发生时 ， 改变 改变 状态 状态 赋值 赋值 赋值 isbase64
if (_ckvak == "checked") {
checkbox.setAttribute ("comprobado", nulo);
isbase64 = falso;
} demás {
checkbox.setAttribute ("comprobado", "marcado");
isbase64 = true;
}
}, verdadero);
btn.addeventListener ("hacer clic", función (e) {// botón 点击事件注册
var _show = document.getElementById (showId); // HTML DOM SELECT ID de showbox
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]);
_Howllegth--;
}
if (isbase64) {// cadena a base64 ， 支持中文编码 ， unescape, encodeuricponent
returnVal = window.btoa (unescape (codeDeUricponent (_InputValue)));
} else {// base64 a la cadena
returnVal = DecodeuricOponent (Escape (Window.atob (_InputValue)));
}
_show.appendChild (document.createTextNode (returnVal)); // Agregar contexto a showbox
}, verdadero);
}) ("entrada", "casilla de verificación", "btn", "showbox");
// CoBrTBase64String ("Entrada", "casilla de verificación", "btn", "showbox");
</script>
</html>
效果 ：
推荐一个 JavaScript IDE 比 Aptana 还好用。Komodo IDE （免费版 ： Komodo Edit ， 基本功能一样）支持语法高亮 智能感知 智能感知 还支持 Perl ， Python, Ruby, Nodejs 语法等。