编程部落

随手写系列——写一个凯撒密码转换页面

作者：

风君子

在

文章目录
  • （因为主要是实现功能，所以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">转换后的明文:&nbsp;&nbsp;</label></td><td><input type="text" name="translation" id="translation"></td></tr><tr><td><label for="translation">转换后的密文:&nbsp;&nbsp;</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的情况 errorj = 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详解 写在最后： 首先，如果本篇文章有任何错误，烦请读者告知！不胜感激！ 其次，本篇文章仅用于日常学习以及学业复习，如需转载等操作请告知作者（我）一声！ 最后，本文会持续修改和更新，如果对本分栏的其他知识也感兴趣，可以移步目录导航专栏，查看本分栏的目录结构，也更方便对于知识的系统总结！ 兄弟姐妹们，点个赞呗！ 感谢！笔芯！ 查看全文 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/313204.html 如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！
  • 随手写系列——写一个凯撒密码转换页面
  • 线程池的应用
  • SpringBoot之Redis整合
  • 5G大规模天线基站下的多用户性能测试技术
  • 【数据结构与算法】试卷 2（含答案）
  • 【力学性能预测】基于BP神经网络的钢板力学性能预测（附完整代码和数据集，系列1）
  • Hive 通过 Jdbc 连接 HiveServer2
  • 硬件设备运行小程序，FinClip来帮忙
  • 4G/5G协同无线网工程建设方案
  • 【CSS】速查复习background相关所有属性(上)
  • 序列动画和图片内存问题
  • 冒泡排序的两种写法
  • c++中this详解
  • 编程是可以从事一生的职业吗
  • STL中常用容器详解
  • c++中的继承的讲解
  • c++虚函数的讲解
  • ListView TableView ScrollView三者之Tableview
  • c++中的std::shared_ptr和std::weak_ptr
  • std::pair的使用

    • 先展示效果
    • H5编写
    • C3编写
    • JS编写——方法一：过程版
    • JS编写——方法二：对象版
    • 代码获取

    （因为主要是实现功能，所以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">转换后的明文:&nbsp;&nbsp;</label></td><td><input type="text" name="translation" id="translation"></td></tr><tr><td><label for="translation">转换后的密文:&nbsp;&nbsp;</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的情况  errorj = 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详解

    写在最后：
    首先，如果本篇文章有任何错误，烦请读者告知！不胜感激！
    其次，本篇文章仅用于日常学习以及学业复习，如需转载等操作请告知作者（我）一声！
    最后，本文会持续修改和更新，如果对本分栏的其他知识也感兴趣，可以移步目录导航专栏，查看本分栏的目录结构，也更方便对于知识的系统总结！
    兄弟姐妹们，点个赞呗！
    感谢！笔芯！

    查看全文

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.dgrt.cn/a/313204.html

    如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

    在这里插入图片描述

    随手写系列——写一个凯撒密码转换页面

    文章目录先展示效果H5编写C3编写JS编写——方法一：过程版JS编写——方法二：对象版代码获取先展示效果
    （因为主要是实现功能，所以CSS写的很粗糙） H5编写
    基础结构如下：
    先构成最外面的大盒子.box&#……

    编程日记2022/12/22 8:18:11

    线程池的应用

    创建多线程的方式：
    继承Thread类创建线程类，重写run()方法 调用步骤，创建继承类的对象t,执行t.start()通过Runnable接口创建线程类，重写run()方法 调用步骤，创建实现类的对象r，创建Thread对象传入参数(r),……

    编程日记2022/12/22 8:17:38

    SpringBoot之Redis整合

    目录
    在pom.xml中添加启动器
    application.yml添加配置
    API测试
    存取字符串类型
    存取哈希类型
    等效操作redis
    字符串类型 本人idea：2020.1.3 springboot：2.7.6 redis：5.0.14.1可用
    在pom.xml中添加启动器 <dependency&gt……

    编程日记2022/12/22 8:17:02

    5G大规模天线基站下的多用户性能测试技术

    【摘 要】在当前5G系统全球商用化的时代，针对基站大规模天线下的多用户技术，对基站和终端进行性能测试是实现产品升级迭代的重要环节。首先，介绍5G多用户技术的主要特点并说明了多用户性能测试的意义。其次，为了实现不同信道环境的大规模天线基站下的多用户性能测试，给出……

    编程日记2022/12/22 8:16:31

    【数据结构与算法】试卷 2（含答案）

    一、选择题 1. 已知指针p和q分别指向某单链表中第一个结点和最后一个结点。假设指针s指向另一个单链表中某个结点，则在s所指结点之后插入上述链表应执行的语句为（） A. q->nexts->next;s->nextp; B. s->nextp;q->nexts->nex……

    编程日记2022/12/22 8:15:58

    【力学性能预测】基于BP神经网络的钢板力学性能预测（附完整代码和数据集，系列1）

    写在前面： 首先感谢兄弟们的订阅，让我有创作的动力，在创作过程我会尽最大能力，保证作品的质量，如果有问题，可以私信我，让我们携手共进，共创辉煌。
    本次实战的项目是：基于BP神经网络的钢板力学性能预测（附完整代码和数据集），系列1，基于pytorch深度学习框架自己搭建……

    编程日记2022/12/22 8:15:24

    Hive 通过 Jdbc 连接 HiveServer2

    Hive 版本：2.3.7 1. 配置
    如果想通过 JDBC 来访问 HiveServer2，需要开启 HiveServer2 服务，具体请参阅 如何启动 HiveServer2。
    2. URL格式
    JDBC客户端允许使用 Java 代码连接到 HiveServer2。可以在远程，嵌入式或 HTTP 模式下建立 JDBC 连接。以下是不同模式的配置： 远……

    编程日记2022/12/22 8:14:08

    硬件设备运行小程序，FinClip来帮忙

    如今小程序技术日趋成熟，但大多小程序的运行都依赖于微信、百度、支付宝、今日头条等各大巨头，使得小程序的运营十分受限。并且，企业也更希望能实现“一次开发，多端运行”。因此，今天就来跟大家分享一下离开各大巨头&a……

    编程日记2022/12/22 8:13:35

    4G/5G协同无线网工程建设方案

    【摘 要】如何处理好4G/5G在资源上的矛盾，解决好二者之间的协同，是当前无线网规划与工程建设面临的新课题。首先结合中国移动5G 2.6 GHz频率使用策略，提出面向4G/5G协同的工程建设方案，随后聚焦4G/5G天面协同，以中国移动现网多制式多频段天馈现状为出发点，提出“最佳三副……

    编程日记2022/12/22 8:13:01

    【CSS】速查复习background相关所有属性(上)

    前言
    background是一种 CSS 简写属性，用于一次性集中定义一个或多个背景属性，其中的属性有以下这些： background-clip background-color background-image background-origin background-size background-attachment background-blend……

    编程日记2022/12/22 8:12:28

    序列动画和图片内存问题

    一、帧动画问题 /*** 帧动画总结：* 1、如果精灵进行新建时，加载了纹理，那么setRestoreOriginalFrame可以设置为false或者true* 2、如果精灵新建时，没有加载纹理的话，那么setRestoreOriginalFrame需要设置为false&#……

    编程日记2023/4/16 15:01:22

    冒泡排序的两种写法

    //第一种写法： #include <iostream> using namespace std; void bubbleSort(int arr[], int n) { for (int i 0; i < n-1; i) { int temp 0; for (int j i1; j <n; j) { if (arr[i] ……

    编程日记2023/4/16 15:01:21

    c++中this详解

    http://blog.csdn.net/ugg/article/details/606396…

    编程日记2023/4/16 15:01:20

    编程是可以从事一生的职业吗

    暂且不论这个话题，留待以后再添加见解。
    目前而言，编程符合自己的性格和兴趣，且可以解决自我的生活，一举两得，总算是做了自己喜欢的事情。2016-7-24
    在此立文以自勉!
    2016-8-30: 1、编程就是一个不断和自我的惰性做……

    编程日记2023/4/16 15:01:20

    STL中常用容器详解

    常用的容器
    一、顺序容器 1、vector 向量 ：随机访问（按照下标）任何一个元素，在尾部增删元素，相当于是一个动态的数组。 vector容器，在头部增加、删除元素，其时间消耗和元素数目成正比&#xff……

    编程日记2023/4/16 15:01:19

    c++中的继承的讲解

    cpp中的继承的总结： 1、继承方式对于之列继承自父类的成的访问权限的影响 对于父类本身没有影响，对于子类扩展成员也没有影响。 2、子类中从父类继承的成员，其访问权限不能高于继承声明时使用的访问权限。 私有继承： 子类中所有继……

    编程日记2023/4/16 15:01:19

    c++虚函数的讲解

    废话少说，直接上测试代码 #include<iostream> #include<stdlib.h>usingnamespace std;//有虚函数的类 class A{public:A();~A();virtual void f(){cout<<"this is A f()"<<endl;}virtual void g(){cout<<"this is A g……

    编程日记2023/4/16 15:01:18

    ListView TableView ScrollView三者之Tableview

    注意点：
    1、其中的listView和Tableview都是继承自Scrollview
    2、本文主要讲解的是tableview
    3、代码部分引用的是在公司中做的产品
    4、以上代码可以修改的地方：将cell改为继承自TableviewCell,这样可以直接创建cell。
    5、代码中使用了函数的绑定和函……

    编程日记2023/4/16 15:01:17

    c++中的std::shared_ptr和std::weak_ptr

    std::share类型在c11提出，其意义：使用shared_ptr解决的主要问题是知道删除一个被多个对象共享的资源的正确时机，在本项目中所有的数据类均是使用智能指针来存储，就是为了解决这个问题。
    一、std::shared_ptr采用的是引用计数来管……

    编程日记2023/4/16 15:01:17

    std::pair的使用

    待续。。。。。。…

    编程日记2023/4/16 15:01:16

    更多文章

    评论

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注

    站内搜索

    标签云

    iphone 三星 信用卡 信贷 华为 小米 微软 快科技 手机 投资理财 支付宝 特斯拉 理财知识 电脑 科技 程序 股票 芯片 苹果 贷款 路由器 银行 银行卡 额度

    热门文章

    友情链接