快捷導(dǎo)航

JavaScript實現(xiàn)的簡單加密解密操作示例

更新時間：2018年06月01日 11:11:53 作者：Mcya

這篇文章主要介紹了JavaScript實現(xiàn)的簡單加密解密操作,涉及javascript基于charCodeAt與fromCharCode的字符串編碼與解碼操作相關(guān)使用技巧,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)的簡單加密解密操作。分享給大家供大家參考，具體如下：

JavaScript實現(xiàn)對內(nèi)容的加密和解密。加密，轉(zhuǎn)成編碼。解密則是編碼轉(zhuǎn)字符串。

<html>
<head>
<meta charset="utf-8" />
<title>www.dbjr.com.cn JS加密解密</title>
</head>
<body>
 <h1> 加密解密 </h1>
 <input type="text" id="secret" /> 
 <input type="button" value="加密" onclick="encode()">
 <input type="button" value="解密" onclick="decode();">
<script>
// 加密
function encode()
{  
  // var s = secret.value;
  // s 是一個字符串， 類型： String
  // 根據(jù) s 來創(chuàng)建一個字符串對象
  // str 的類型是: Object
  // var str = new String(s);
  // length 是獲取字符串對象的長度，也就是說有多少個字符
  // str.length
  var str = secret.value;
  var r = "";
  // string 類型的可以當(dāng)做字符串對象來用
  for (var i = 0; i < str.length; i++)
  {
    // 取出下標(biāo)為 i 字符的編碼
    var code = str.charCodeAt(i);
    // 將字符對應(yīng)的編碼，拼接到一個空字符串上
    r += code;
    // 每個符號后，添加 , 分割
    r += ",";
  }
  // secret.value 
  // 設(shè)置輸入框的內(nèi)容為 r
  secret.value = r;
}
// 使用到知識點(1)---如何將一個 數(shù)字 轉(zhuǎn)換成對應(yīng)的 字符
// String.fromCharCode 
// 函數(shù)功能： 將 數(shù)字 轉(zhuǎn)換成對應(yīng)的 字符
// String 其實是系統(tǒng)的一個對象
// document.write(  String.fromCharCode(97) );
/*
var s = "97,98,99,";
// 字符串對象中 split 方法
// 作用： 按照參數(shù) 分割 字符串
// 返回值： 分割之后的 數(shù)組
var arr = s.split(",");
// 數(shù)組中多了一個空白的元素，如何處理？
// 刪除數(shù)組中最后一個元素
arr.pop();
document.write(arr);
//*/
// 解密
function decode()
{
  // 獲取文本框中的字符串
  // 例如： 96,97,98
  var str = secret.value;
  // 思路：
  // 1. 按照 , 分割字符串
  // 2. 將每個 分割的子字符串 轉(zhuǎn)換成 數(shù)字，再轉(zhuǎn)換成 字符
  //   96 97 98
  // 3. 將還原的字符，拼接在一起，再設(shè)置到 input 中去
  var arr = str.split(",");
  // 用于拼接結(jié)果的
  var r = "";
  for (var i = 0; i < arr.length; i++)
  {
    // 獲取加密后的 字符串的編碼，是一個數(shù)字
    var code = parseInt(arr[i]);
    r += String.fromCharCode(code);
  }
  // 將拼接后的結(jié)果，設(shè)置到 input 中
  secret.value = r;
}
</script> 
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試運行結(jié)果如下：