encrypt.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>哈希加密</title>
  6. <link href="../../component/pear/css/pear.css" rel="stylesheet" />
  7. </head>
  8. <body class="pear-container">
  9. <div class="layui-row layui-col-space10">
  10. <div class="layui-col-md12">
  11. <div class="layui-card">
  12. <div class="layui-card-header">
  13. 开发环境
  14. </div>
  15. <div class="layui-card-body">
  16. Pear encrypt 为前端开发 提供 加密服务
  17. </div>
  18. </div>
  19. </div>
  20. <div class="layui-col-md12">
  21. <div class="layui-collapse">
  22. <div class="layui-colla-item">
  23. <h2 class="layui-colla-title">显示代码</h2>
  24. <div class="layui-colla-content">
  25. <pre class="layui-code" lay-encode="true">
  26. &lt;script src="component/layui/layui.js">&lt;/script>
  27. &lt;script src="component/pear/pear.js">&lt;/script>
  28. </pre>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="layui-col-md12">
  34. <div class="layui-card">
  35. <div class="layui-card-header">加密操作</div>
  36. <div class="layui-card-body">
  37. <form class="layui-form" action="javascript:void(0);">
  38. <div class="layui-form-item layui-input-inline">
  39. <input id="enter" value="123456" type="text" class="layui-input" />
  40. </div>
  41. <div class="layui-form-item layui-input-inline">
  42. <select name="encode" lay-verify="">
  43. <option value="">加密方式</option>
  44. <option value="1">MD5</option>
  45. <option value="2">SHA1</option>
  46. <option value="3">SHA256</option>
  47. <option value="4">SHA512</option>
  48. <option value="5">rmd160</option>
  49. <option value="6">crc32</option>
  50. <option value="7">Base64Encode</option>
  51. </select>
  52. </div>
  53. <div class="layui-form-item layui-input-inline">
  54. <button id="encode" class="pear-btn pear-btn-primary">Encode</button>
  55. </div>
  56. </form>
  57. </div>
  58. </div>
  59. </div>
  60. <div class="layui-col-md12">
  61. <div class="layui-card">
  62. <div class="layui-card-header">加密结果</div>
  63. <div class="layui-card-body" id="end">
  64. </div>
  65. </div>
  66. </div>
  67. <div class="layui-col-md12">
  68. <div class="layui-collapse">
  69. <div class="layui-colla-item">
  70. <h2 class="layui-colla-title">显示代码</h2>
  71. <div class="layui-colla-content">
  72. <pre class="layui-code" lay-encode="true">
  73. layui.use(['encrypt'], function() {
  74. var encrypt = layui.encrypt;
  75. encrypt.md5( str );
  76. encrypt.sha1( str );
  77. encrypt.sha256( str );
  78. })
  79. </pre>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. <div class="layui-col-md12">
  85. <div class="layui-card">
  86. <div class="layui-card-header">API 文档</div>
  87. <div class="layui-card-body" id="end">
  88. <div>
  89. <span>encrypt.md5( str ) -- MD5加密</span>
  90. <br>
  91. <br>
  92. <span>encrypt.sha1( str ) -- SHA1加密</span>
  93. <br>
  94. <br>
  95. <span>encrypt.sha256( str ) -- SHA256加密</span>
  96. <br>
  97. <br>
  98. <span>encrypt.sha512( str ) -- SHA512加密</span>
  99. <br>
  100. <br>
  101. <span>encrypt.rmd160( str ) -- RMD160加密</span>
  102. <br>
  103. <br>
  104. <span>encrypt.crc32( str ) -- CRC32加密</span>
  105. <br>
  106. <br>
  107. <span>encrypt.Base64Encode( str ) -- BASE64加密</span>
  108. <br>
  109. <br>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. <script src="../../component/layui/layui.js"></script>
  116. <script src="../../component/pear/pear.js"></script>
  117. <script>
  118. layui.use(['encrypt', 'form', 'jquery','layer','element','code'], function() {
  119. var encrypt = layui.encrypt;
  120. var form = layui.form;
  121. var $ = layui.jquery;
  122. var layer = layui.layer;
  123. var element = layui.element;
  124. layui.code();
  125. $("#encode").click(function() {
  126. var encode = $("[name='encode']").val();
  127. var end;
  128. if (encode == 1) {
  129. end = encrypt.md5($("#enter").val());
  130. } else if (encode == 2) {
  131. end = encrypt.sha1($("#enter").val());
  132. } else if (encode == 3) {
  133. end = encrypt.sha256($("#enter").val());
  134. } else if (encode == 4) {
  135. end = encrypt.sha512($("#enter").val());
  136. } else if (encode == 5) {
  137. end = encrypt.rmd160($("#enter").val());
  138. } else if (encode == 6) {
  139. end = encrypt.crc32($("#enter").val());
  140. } else if (encode == 7) {
  141. end = encrypt.Base64Encode($("#enter").val());
  142. } else{
  143. layer.msg("请选择加密方式",{icon:3,time:1000});
  144. }
  145. $("#end").append('<button class="pear-btn">加密方式 : ' + $("[value=" + $("[name='encode']")
  146. .val() + "]").text() + '&nbsp;&nbsp;&nbsp;&nbsp;明文 : ' + $("#enter").val() +
  147. '&nbsp;&nbsp;&nbsp;&nbsp;加密结果 : ' + end + '</button><br><br>');
  148. })
  149. })
  150. </script>
  151. </body>
  152. </html>