如何結合jquery的MD5外掛和CSS3設計字串加密

2019-12-11 12:24:45

在jQuery中的加密外掛，除了有base64之外，還有MD5加密。不過這種加密方法有個缺點，加密之後不可解密，如果要解密的話，需要使用解密工具。下面利用一個範例說明MD5外掛和CSS3結合起來，建立加密文字方塊，操作如下：

第一步，在HBuilder工具中，建立Web專案；並在Web專案的目錄新建靜態頁面，引入jquery和MD5相關的js檔案，如下圖所示：

第二步，在<body>標籤內，插入兩個輸入框，一個輸入框可以輸入，另一個禁止輸入；設定兩個輸入框的寬度、高度、字型樣式屬性，如下圖所示：

第三步，接著在輸入框下面新增一個按鈕MD5加密，並在<script></script>標籤內新增按鈕點選事件，如下圖所示：

第四步，儲存程式碼並在瀏覽器中預覽頁面效果，點選MD5加密按鈕，這時第二個輸入框會顯示一串字元，這是對空格加密，如下圖所示：

第五步，一般情況下，對空字串加密沒有多大意義，所以需要對加密字串進行判斷，如果為空不進行加密，如下圖所示：

第六步，再次儲存程式碼並檢視頁面顯示效果，如果為空會彈出提示內容；輸入字串，點選加密按鈕進行加密；為按鈕和輸入框新增樣式，如半徑、背景漸變等，如下圖所示：