html::
复制代码代码如下:
<!doctype html>
<html>
<头>
<Title>页面标题</title>
<style type =“ text/css”>
*{font-family:consolas; font style:italic}
.ResponseBox {width:900px; Margin:10px Auto; Padding:10px; Border:2px实心#366; Border-Radius:10px 0 10px 0;文字合格:中心}
.ResponseBox输入,.ResponseBox按钮{font-size:30px; Margin:5px; Padding:5px;}
。
。
#showbox {width:900px;高度:430px; border:5px solid#663; border-radius:0 20px 0 20px; margin; margin; margin; 10px auto; padding; padding:8px; font-size; 20px}}
</style>
</head>
<身体>
<div>
<h1> JavaScript base64 Encode&Decode <Span> [email protected] </span> <span> 2014-12-27 17:44 </span> </span> </span> </h1>
<输入type =“ text” id =“ input”>
<输入type =“复选框”
<按钮id =“ btn”>转换完成!</button>
</div>
<div ID =“ Showbox”> </div>
</body>
<脚本类型=“ text/javascript”>
/*JavaScript知识:
*函数:window.at.atob()window.btoa()unescape()eassce()
*正则表达式清除首位空格:_string.replace(/(^/s*)|(/s*$)/g,“”);
*
*covertbase64Ostring自执行函数
*InputID输入框ID
*CheckBoxID选择框ID
*btnid按钮id
*ShowID HTML显示容器ID,这里是一个div#showbox
*/
(函数CovertBase64Ostring(inputID,checkboxid,btnid,showid){
var checkbox = document.getElementById(checkboxid); // HTML DOM选择复选框
var chkvalue = checkbox.getAttribute(“ checked”); // HTML DOM选择checkedValue
var btn = document.getElementById(btnid); // HTML DOM选择按钮ID
var isbase64; // BASE64TOSTRING或StringTobase64 bool
var returnVal = null; //转换字符串
chkvalue ==“检查”? isbase64 = true:isbase64 = false; //判断检查ISBASE64
checkbox.addeventlistener(“单击”,函数(e){//复选框点击事件注册
var _ckvak = checkbox.getAttribute(“ checked”); //点击事件发生时,改变,检查,ISBASE64
如果(_ckvak ==“检查”){
checkbox.setAttribute(“检查”,null);
isbase64 = false;
} 别的 {
checkbox.setAttribute(“检查”,“检查”);
isbase64 = true;
}
}, 真的);
btn.addeventlistener(“单击”,函数(e){//按钮点击事件注册
var _show = document.getElementById(showid); // HTML DOM选择Showbox ID
var _inputValue = document.getElementById(inputId).value; //文本框取值
//_inputvalue = _inputvalue.replace(/satectdatectdatectd(/:(/shemplectect(/sth:flice)( //正则表达式去除首位空格,似乎,btoa,abob已经做了这些工作
var _showlength = _show.childnodes.length; //遍历showbox,清除showbox内容
while(_showlength> 0){
_show.removechild(_show.childnodes [_showlength -1]);
_showlength--;
}
if(isbase64){// string to base64,支持中文编码,unescape,encodeuricomponent
returnVal = window.btoa(unescape(encdeuricomponent(_inputValue)));
} else {// base64 to String
returnVal = decodeuricomponent(suspe(window.atob(_inputValue))));
}
_show.appendchild(document.CreateTextNode(returnVal)); //将上下文添加到Showbox
}, 真的);
})(“输入”,“复选框”,“ BTN”,“ Showbox”);
// covertbase64orstring(“输入”,“复选框”,“ BTN”,“ Showbox”);
</script>
</html>
效果:
推荐一个javaScript IDE比aptana还好用。komodo inde:komodo eding,基本功能一样)支持语法高亮,智能感知