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，基本功能一樣）支持語法高亮，智能感知