html 代码:
复制代码代码如下:
<! Doctype html>
<html>
<head>
<title> Título da página </title>
<style type = "text/css">
*{Font-Family: Consolas; Style: Italic}
.Responsebox {Width: 900px; margem: 10px Auto; preenchimento: 10px; borda: 2px Solid #366; Radio de borda: 10px 0 10px 0; Alinhamento de texto: centro}
.Responsebox Entrada, .ResponseBox Button {Font-Size: 30px; margem: 5px; preenchimento: 5px;}
.SPANSUPER {Align Vertical: Super; font-size: 14px}
.spanbottom {alinhamento vertical: texto-texto; font-size: 12px; margem-esquerda: -110px}
#showbox {width: 900px; altura: 430px; borda: 5px Solid #663; Radio de borda: 0 20px 0 20px; margem: 10px Auto; preenchimento: 8px; tamanho da fonte: 20px}
</style>
</head>
<Body>
<div>
<H1> javascript base64 codificar e decodificar <span> [email protected] </span> <pan> 2014-12-27 17:44 </span> </h1>
<input type = "text" id = "input">
<input type = "Caixa de seleção" id = "
<button id = "btn"> converta feito! </botão>
</div>
<div id = "showbox"> </div>
</body>
<script type = "text/javascript">
/*JavaScript 知识:
*函数 ： Window.ATOB () Window.BTOA () UNESCAPE () ESCAPE () ENCODEURICOMPONS () decodEuricomponent ()
*正则表达式清除首位空格 ： _String.Replace (/(^/s*) | (/s*$)/g, "");
*
*CoverTBase64orString 自执行函数
*inputId 输入框 id
*CheckboxId 选择框 Id
*btnid 按钮 id
*ShowId html 显示容器 id ， 这里是一个 div#showbox
*/
(função CoverTBase64orString (InputId, CheckboxId, BTNID, Showid) {
var caixa de seleção var = document.getElementById (CheckboxID); // html DOM Selecione a caixa de seleção
var chkvalue = caixa de seleção.getAttribute ("verificado"); // html dom selecione CheckedValue
var btn = document.getElementById (btnid); // html DOM Selecione o botão ID
var isbase64; // base64toString ou stringtobase64 bool
var returnVal = nulo; // string convertida
chkvalue == "verificado"? isBase64 = true: isBase64 = false; // 判断 Verifique 按钮初始化状态 赋值 ISBASE64
caixa de seleção.addeventListener ("clique", função (e) {// Caixa de seleção 点击事件注册
var _ckvak = caixa de seleção.getAttribute ("verificado"); // 点击事件发生时 ， 改变 Verifique 状态 ， 赋值 isBase64
if (_ckvak == "checked") {
caixa de seleção.setAtattribute ("verificado", nulo);
isBase64 = false;
} outro {
caixa de seleção.setAtattribute ("verificado", "verificado");
isBase64 = true;
}
}, verdadeiro);
btn.addeventListener ("clique", função (e) {// botão 点击事件注册
var _show = document.getElementById (showId); // html dom selecione ID ShowBox
var _inputValue = document.getElementById (inputId) .Value; // 文本框取值
//_inputValue=_inputValue.replace(/(^/s*)|(/s*$)/G, ""); // 正则表达式去除首位空格 ， 似乎 btoa ， abob 已经做了这些工作
var _showlgen = _show.childnodes.length; // 遍历 ShowBox ， 清除 ShowBox 内容
while (_showlength> 0) {
_show.removechild (_show.childnodes [_showlghngth - 1]);
_showl comprimento--;
}
if (isbase64) {// string para base64 ， 支持中文编码 ， unacape ， codeuricomponent
returnVal = window.btoa (UNESCAPE (Encodeuricomponent (_inputValue)));
} else {// base64 para string
returnVal = decodeuricomponent (Escape (Window.atob (_inputValue)));
}
_show.appendChild (document.createTextNode (returnVal)); // Adicionar contexto ao showbox
}, verdadeiro);
}) ("entrada", "Caixa de seleção", "btn", "showbox");
// CoverTBase64orString ("entrada", "Caixa de seleção", "btn", "showbox");
</script>
</html>
效果
推荐一个 JavaScript IDE 比 Aptana 还好用。komodo IDE （免费版 ： Komodo Edit ， 基本功能一样） 支持语法高亮 ， 智能感知 ， 还支持 perl ， python ， rubi ， nodejs 语法等。