2013-09-25 54 views
-2

今天我遇到了我的旋转密码加密网站的问题。它应该询问类型(ROT1,ROT2,ROT3等)以及是否要加密或解密。然后你必须输入信息,它会提醒结果。即使解密部分有效,加密部分也不会。我的代码如下:旋转密码加密不加密

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>ROT</title> 

    <link rel="stylesheet" type="text/css" href="stylesheet.css"> 

    <script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> 
    <script src="http://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
    <script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<body> 



    <div id="choose_rot"> 

     <div> 
      <div class="rot_button" id="1">ROT1</div> 
      <div class="rot_button" id="2">ROT2</div> 
      <div class="rot_button" id="3">ROT3</div> 
      <div class="rot_button" id="4">ROT4</div> 
      <div class="rot_button" id="5">ROT5</div> 
     </div> 

     <div> 
      <div class="rot_button" id="6">ROT6</div> 
      <div class="rot_button" id="7">ROT7</div> 
      <div class="rot_button" id="8">ROT8</div> 
      <div class="rot_button" id="9">ROT9</div> 
      <div class="rot_button" id="10">ROT10</div> 
     </div> 

     <div> 
      <div class="rot_button" id="11">ROT11</div> 
      <div class="rot_button" id="12">ROT12</div> 
      <div class="rot_button" id="13">ROT13</div> 
      <div class="rot_button" id="14">ROT14</div> 
      <div class="rot_button" id="15">ROT15</div> 
     </div> 

     <div> 
      <div class="rot_button" id="16">ROT16</div> 
      <div class="rot_button" id="17">ROT17</div> 
      <div class="rot_button" id="18">ROT18</div> 
      <div class="rot_button" id="19">ROT19</div> 
      <div class="rot_button" id="20">ROT20</div> 
     </div> 

     <div> 
      <div class="rot_button" id="21">ROT21</div> 
      <div class="rot_button" id="22">ROT22</div> 
      <div class="rot_button" id="23">ROT23</div> 
      <div class="rot_button" id="24">ROT24</div> 
      <div class="rot_button" id="25">ROT25</div> 
     </div> 

    </div> 

    <div id="encrypt_decrypt"> 
     <div class="encrypt_decrypt_button" id="decrypt">Encrypt</div> 
     <div class="encrypt_decrypt_button" id="encrypt">Decrypt</div> 
    </div> 

    <div id="message"> 
     <form id="form"> 
      Enter the message: <input type="text" name="message"> 
      <br> 
      <input type="button" value="encrypt/decrypt" onClick="sendMessage(this.form)"> 
     </form> 
    </div> 

</body> 
</html> 

CSS:

body, html { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    overflow: hidden; 
} 

#choose_rot { 
    display: inline; 
    padding: auto; 
} 

#encrypt_decrypt { 
    display: inline; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -20%; 
    margin-top: -37.5px; 
    width: 100%; 
} 

#message { 
    display: inline; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -10%; 
    margin-top: -100px; 
    width: 100%; 
} 

#form { 
    width: 15%; 
    height: 75px; 
    line-height: 75px; 
    font-size: 25px; 
    margin: 2.5%; 
    background-color: red; 
    float: left; 
    text-align: center; 
} 

.rot_button, .encrypt_decrypt_button { 
    width: 15%; 
    height: 75px; 
    line-height: 75px; 
    font-size: 25px; 
    margin: 2.5%; 
    background-color: red; 
    float: left; 
    text-align: center; 
} 

而且最重要的组成部分,使用Javascript/JQuery的:

$(document).ready(function() { 

    $("#encrypt_decrypt, .encrypt_decrypt_button, #message").fadeOut(0); 

    var rotation; 
    var type; 

    $(".rot_button").click(function() { 
     window.rotation = $(this).attr("id"); 

     $("#choose_rot, .rot_button").fadeOut("slow", function() { 
      $("#encrypt_decrypt, .encrypt_decrypt_button").fadeIn("slow"); 
     }); 
    }); 

    $(".encrypt_decrypt_button").click(function() { 
     window.type = $(this).attr("id"); 

     $("#encrypt_decrypt, .encrypt_decrypt_button").fadeOut("slow", function() { 
      $("#message").fadeIn("slow"); 
     }); 
    }); 

}); 

function sendMessage(form) { 
      var message = form.message.value; 
      message.toLowerCase(); 
      var ascii_message = new Array(); 
      var ascii_encrypted_message = new Array(); 
      var encrypted_message = new Array(); 

      for (i=0;i < message.length; i++) { 

       ascii_message[i] = message.charCodeAt(i); 

      } 

      for (i=0;i < message.length; i++) { 

       if ( (ascii_message[i] >= 97) && (ascii_message[i] <= 122) ) { 

        if (type == "decrypt") { 

         var new_message = ascii_message[i] + rotation; 

         if (new_message > 122) { 
          new_message = new_message - 26; 

          ascii_encrypted_message[i] = new_message; 

          encrypted_message[i] = String.fromCharCode(ascii_encrypted_message[i]); 
          alert(encrypted_message.join("")); 
         } 

         else { 
          ascii_encrypted_message[i] = new_message; 

          encrypted_message[i] = String.fromCharCode(ascii_encrypted_message[i]); 
          alert(encrypted_message.join("")); 
         } 



        } 

        else if (type == "encrypt") { 
         var new_message = ascii_message[i] - rotation; 

         if (new_message < 97) { 
          new_message = new_message + 26; 

          ascii_encrypted_message[i] = new_message; 

          encrypted_message[i] = String.fromCharCode(ascii_encrypted_message[i]); 
          alert(encrypted_message.join("")); 
         } 

         else { 
          ascii_encrypted_message[i] = new_message; 

          encrypted_message[i] = String.fromCharCode(ascii_encrypted_message[i]); 
          alert(encrypted_message.join("")); 
         } 
        } 
       } 
       else { 
        alert("HELLO!"); 
       } 
      } 

     } 

任何人都可以或许帮助我解决这个问题时,加密部分几乎与解密部分相同。唯一的区别是ascii_message [i]轮转之间的负数。

的jsfiddle:http://jsfiddle.net/YRwwY/1/

+0

请注意,您为Encrypt&Decrypt按钮设置了“id”错误。 –

+0

超过70%的提供的内容与这个问题无关 - 自己解决问题应该是您在发布之前的第一步。作为解决问题的自己和寻求帮助的先决条件,除了最大限度的复制问题所需的最少量外, – symcbean

回答

0

原因一个是工作,而另一种是不处于“+”和使用“ - ”运营商。 Ascii_message [i]是一个数字,而旋转是一个字符串。我建议改行

var new_message = ascii_message[i] + parseInt(rotation); 

这样你就可以添加两个数字,这应该可以正常工作。请参阅:http://jsfiddle.net/YRwwY/2/