index.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <!-- saved from url=(0014)about:internet -->
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>crypty</title>
  7. <script src="../js/jquery-1.7.2.js"></script>
  8. <script src="../js/aes.js"></script>
  9. <script src="../js/tripledes.js"></script>
  10. <script src="../js/rabbit.js"></script>
  11. <script src="../js/rc4.js"></script>
  12. <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  13. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
  14. <link rel="stylesheet" href="../css/bootstrap.min.css" crossorigin="anonymous">
  15. <link rel="preconnect" href="https://fonts.gstatic.com">
  16. <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  17. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  18. <link rel="stylesheet" href="../css/style.css">
  19. <style>
  20. .sel:hover{
  21. background-color :rgb(220, 220, 220);
  22. cursor: pointer;
  23. }
  24. .sel input:hover{
  25. cursor: pointer;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <a class="btn btn-info" href="/" style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;"><span
  31. class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
  32. <div>
  33. <div class="row">
  34. <div class="col-lg-6 col-md-6 col-xs-12">
  35. 明文:
  36. <textarea class="col-xs-12" rows="10" name="message" id="msg_source" class="text_source"></textarea>
  37. </div>
  38. </div>
  39. <div class="row" style="padding:5px">
  40. <div class="col-lg-6 col-md-6 col-xs-12">
  41. <div class="input-group" style="margin:5px">
  42. <span class="input-group-addon">加密算法</span>
  43. <span class="input-group-addon sel" value="aes"><input type="radio" name="Etype" value="aes"
  44. checked="checked" />AES</span>
  45. <span class="input-group-addon sel" value="des"><input type="radio" name="Etype"
  46. value="des" />DES</span>
  47. <span class="input-group-addon sel" value="rc4"><input type="radio" name="Etype"
  48. value="rc4" />RC4</span>
  49. <span class="input-group-addon sel" value="rabbit"><input type="radio" name="Etype"
  50. value="rabbit" />Rabbit</span>
  51. <span class="input-group-addon sel" value="tripledes"><input type="radio" name="Etype"
  52. value="tripledes" />TripleDes</span>
  53. </div>
  54. <div class="input-group" style="margin:5px">
  55. <span class="input-group-addon">密码</span>
  56. <input type="text" class="form-control" id="pwd" />
  57. </p>
  58. <span class="input-group-btn">
  59. <button class="btn btn-default" onclick="encrypt();"
  60. style="text-shadow: rgb(185, 185, 185) 3px 2px 4px;"><span
  61. class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>&nbsp;加密</button>
  62. <button class="btn btn-default" onclick="decrypt();"
  63. style="text-shadow: rgb(185, 185, 185) 3px 2px 4px;"><span
  64. class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>&nbsp;解密</button>
  65. </span>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="row">
  70. <div class="col-lg-6 col-md-6 col-xs-12">
  71. <div>密文:</div>
  72. <textarea rows="10" class="col-xs-12" name="cipher" id="encrypt_result"
  73. onclick="this.select();"></textarea>
  74. </div>
  75. </div>
  76. <script>
  77. $('span').on("click", function () {
  78. $('input[value="' + $(this).attr('value') + '"]').attr('checked', 'checked')
  79. })
  80. function encrypt() {
  81. switch ($('input[name="Etype"]:checked').val()) {
  82. case "aes":
  83. $("#encrypt_result").val(CryptoJS.AES.encrypt($("#msg_source").val(), $("#pwd").val()));
  84. break;
  85. case "des":
  86. $("#encrypt_result").val(CryptoJS.DES.encrypt($("#msg_source").val(), $("#pwd").val()));
  87. break;
  88. case "rabbit":
  89. $("#encrypt_result").val(CryptoJS.Rabbit.encrypt($("#msg_source").val(), $("#pwd").val()));
  90. break;
  91. case "rc4":
  92. $("#encrypt_result").val(CryptoJS.RC4.encrypt($("#msg_source").val(), $("#pwd").val()));
  93. break;
  94. case "tripledes":
  95. $("#encrypt_result").val(CryptoJS.TripleDES.encrypt($("#msg_source").val(), $("#pwd").val()));
  96. break;
  97. }
  98. }
  99. function decrypt() {
  100. switch ($('input[name="Etype"]:checked').val()) {
  101. case "aes":
  102. $("#msg_source").val(CryptoJS.AES.decrypt($("#encrypt_result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
  103. break;
  104. case "des":
  105. $("#msg_source").val(CryptoJS.DES.decrypt($("#encrypt_result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
  106. break;
  107. case "rabbit":
  108. $("#msg_source").val(CryptoJS.Rabbit.decrypt($("#encrypt_result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
  109. break;
  110. case "rc4":
  111. $("#msg_source").val(CryptoJS.RC4.decrypt($("#encrypt_result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
  112. break;
  113. case "tripledes":
  114. $("#msg_source").val(CryptoJS.TripleDES.decrypt($("#encrypt_result").val(), $("#pwd").val()).toString(CryptoJS.enc.Utf8));
  115. break;
  116. }
  117. }
  118. </script>
  119. </div>
  120. </body>
  121. </html>