相信喜歡站長helicopter寫的教程的學友們都對 學習網上面的在線工具印象深刻。很多人就會疑惑這些在線工具是怎樣做出來的。現在我就使用這一章學習的知識給大家講解一下其中一個工具“escape加密解密工具”的制作思路。對，你沒有聽錯，俺就跟你說工具是怎麼做出來的。大家看我像那種心裡有貨，不會拿出來跟大家分享的人麼？
圖1 學習網中的在線escape加解密工具
代碼實現如下：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
//定義基本樣式
<style type="text/css">
#txt-input,#txt-output
{
height:60px;
}
</style>
<script type="text/javascript">
//定義加密函數
function encrypt()
{
//獲取輸入框的值
var str = document.getElementById("txt-input").value;
//將輸入框的值加密，並賦給輸出框
document.getElementById("txt-ouput").value = escape(str);
}
//定義解密函數
function decrypt()
{
//獲取輸入框的值
var str = document.getElementById("txt-input").value;
//將輸入框的值加密，並賦給輸出框
document.getElementById("txt-ouput").value = unescape(str);
}
</script>
</head>
<body>
<form>
<textarea id="txt-input" cols="20"></textarea><br />
<input id="btn-encrypt" type="button" value="加密" onclick="encrypt()"/>
<input id="btn-decrypt" type="button" value="解密" onclick="decrypt()"/>
<input id="Reset1" type="reset" value="清空" /><br />
<textarea id="txt-ouput" cols="20"></textarea>
</form>
</body>
</html>
在浏覽器預覽效果如下（IE浏覽器）：
分析：
（1）重置按鈕的作用域是同一個form標簽內部的文本框，這一點請參考“HTML入門教程”中的“按鈕button”這一節；
（2）這裡再次用到了document.getElementById()這一JavaScript的id選擇器，這次大家打死都要記住這一個語句了，在之前都講解了3次以上了；
（3）這個在線工具邏輯已經實現，界面還比較粗糙，剩下的就交給大家潤色了。