今日、ローテーション サイファー暗号化サイトで問題が発生しました。タイプ（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]とrotationの間のマイナスです。
jsFiddle: http://jsfiddle.net/YRwwY/1/