（因为主要是实现功能，所以CSS写的很粗糙）
基础结构如下：
先构成最外面的大盒子.box，然后.inner>p装入注意事项，接着包含一个form，里面是一个table（存放输入框）+.buts（存放按钮）。
<div class="box">
<div class="inner">
<p>
<h3>注意事项：</h3>
1、在输入框中输入一串字符串<br />
2、点击按钮translation_forward将其转换为凯撒密码的明文<br />
3、点击按钮translation_back将其转换为凯撒密码的密文<br />
</p>
</div>
<form action="">
<table>
<tr>
<!-- 通过label 标签增大用户点击到输入框的面积 -->
<td><label for="user_input">请输入:</label></td>
<td><input type="text" name="user_input" id="user_input"></td>
</tr>
<tr>
<td><label for="translation">转换后的明文: </label></td>
<td><input type="text" name="translation" id="translation"></td>
</tr>
<tr>
<td><label for="translation">转换后的密文: </label></td>
<td><input type="text" name="translation" id="translation"></td>
</tr>
</table>
<div class="buts">
<!-- 此处要注意必须将按钮的type值修改为button，否则默认为submit，会提交，这样点击按钮后页面会刷新 -->
<!-- 所以结果出现的时间很短暂，无法满足效果 -->
<button type="button">translation_forward</button>
<button type="button">translation_back</button>
<button type="reset">reset</button>
</div>
</form>
</div>
样式表没啥说的，写的挺冗余的，希望有好兄嘚改进后能发我瞻仰瞻仰。
/* 全局设定，清除浏览器默认样式值 */
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
/* 将大盒子放在一个页面居中的位置 */
.box {
/* position: relative; */
/* left: 50%; */
/* margin-left: -200px; */
margin: 200px auto 0;
width: 500px;
height: 400px;
border: 2px solid blue;
background-color: rgba(255, 1, 200, .3);
}
/* 注意事项 */
.inner {
width: 100%;
height: 150px;
margin-bottom: 20px;
font-size: 18px;
font-family: "楷体";
line-height: 2em;
/* 2em:因为此处是汉字，汉字是方块字，宽和高的长度相等，所以间距就是两个汉字的高度 */
}
input,
button {
margin: 0 auto 5px;
border: 1px solid red;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 15px;
border-radius: 6px;
}
/* 此处的100%是继承的 第二个 td的宽 */
input {
width: 100%;
}
button {
width: 130px;
margin: 0 5px 0 5px;
font-family: "Times New Roman";
}
/* input 宽继承此处 */
tr td:last-child{
width: 300px;
margin: 0 0 0 10px;
}
.buts{
margin: 25px auto 0 30px;
}
首先，我们通过querySelectAll() 获取所有的input和button元素，并在后面为其绑定事件。
定义全局变量user_input记录用户输入，plaintext记录通过按钮translation_forward求得的明文，cryptograph记录通过按钮translation_back求得的密文。
alphabet_xxx 记录的是大小写字母表，用于后面为每一个大/小写字母进行转换。（我知道很繁琐，但你先别繁琐，隔离+阳 一个月多了，能记起这点儿已经不错了~（doge）~~ ）
// 获取元素
var text = document.querySelectorAll('input');
var submit = document.querySelectorAll('button');
var user_input = ""; //用户输入的内容
var plaintext = ""; // 明文
var cryptograph = ""; // 密文
var alphabet_lower = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
var alphabet_upper = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
接着是绑定事件，先为用户输入框绑定一个“失去焦点”事件，每当用户点击输入框之外区域失去输入框焦点后，将输入框中的内容存入user_input中。
// 绑定事件
text[0].addEventListener('blur', function(){
user_input = text[0].value;
//console.log(user_input);
});
接着为第一个按钮translation_forward绑定事件，当发生“onclick”事件后，进行运算并输出转换后的明文。
循环遍历每一个字母，先判断是大写还是小写字母，并赋值相应的字母表，接着确定转换后的字母在字母表中的下标，并将其添加到明文plaintext中，最后结束循环并将结果输出到结果框中。
// 后面第三个字符代替(只需要获取到输入的字符串对应位置字母的ASCLL码，进行加减三操作即可)
submit[0].addEventListener('click', function(){
plaintext = ""; //初始化
for(var i = 0; i < user_input.length; i++){
var alphabet = (65 <= user_input.charCodeAt(i) && user_input.charCodeAt(i) <= 90 )? alphabet_upper : alphabet_lower;
var j = alphabet.indexOf(user_input[i]);
//console.log(j);
//j = ((j + 1 + 26 - 3) % 26) - 1;
//j = j > 0? j : (j + 26) % 25; // 去除j-1=-1的情况 error
j = j - 3 > 0? j - 3 : (j - 3 + 26) % 26;
//console.log(j);
plaintext += alphabet[j];
};
//console.log(plaintext);
text[1].value = plaintext;
});
同理，为第二个按钮绑定点击事件，只是其中确定下标的判断条件有些许区别，其余的内容均相同，最后输出cryptograph到第二个结果框中。
submit[1].addEventListener('click', function(){
cryptograph = ""; //初始化
for(var i = 0; i < user_input.length; i++){
var alphabet = (65 <= user_input.charCodeAt(i) && user_input.charCodeAt(i) <= 90 )? alphabet_upper : alphabet_lower;
var j = alphabet.indexOf(user_input[i]);
j = (j + 3) % 26;
cryptograph += alphabet[j];
}
//console.log(cryptograph);
text[2].value = cryptograph;
})
暂时有点errors，等重新学学再说。希望找到工作的我可以回来补全这篇文章。
GitHub地址：https://github.com/chenfeng-hx/FiiNote
参考文章
CSS特效（二）：利用html和css制作毛玻璃特效和按钮动画效果
html设置盒子水平垂直居中,盒子水平垂直居中10种方法
text-indent:2em详解
写在最后：
首先，如果本篇文章有任何错误，烦请读者告知！不胜感激！
其次，本篇文章仅用于日常学习以及学业复习，如需转载等操作请告知作者（我）一声！
最后，本文会持续修改和更新，如果对本分栏的其他知识也感兴趣，可以移步目录导航专栏，查看本分栏的目录结构，也更方便对于知识的系统总结！
兄弟姐妹们，点个赞呗！
感谢！笔芯！