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

文章目录

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

先展示效果

（因为主要是实现功能，所以CSS写的很粗糙）
请添加图片描述

H5编写

基础结构如下：
在这里插入图片描述

先构成最外面的大盒子.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>

C3编写

样式表没啥说的，写的挺冗余的，希望有好兄嘚改进后能发我瞻仰瞻仰。

/* 全局设定，清除浏览器默认样式值 */
* {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: rgba255, 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;
}

JS编写——方法一：过程版

首先，我们通过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.loguser_input);
});

接着为第一个按钮translation_forward绑定事件，当发生“onclick”事件后，进行运算并输出转换后的明文。

循环遍历每一个字母，先判断是大写还是小写字母，并赋值相应的字母表，接着确定转换后的字母在字母表中的下标，并将其添加到明文plaintext中，最后结束循环并将结果输出到结果框中。

// 后面第三个字符代替只需要获取到输入的字符串对应位置字母的ASCLL码，进行加减三操作即可)
submit[0].addEventListener'click', function){plaintext = "";   //初始化forvar i = 0; i < user_input.length; i++){var alphabet = 65 <= user_input.charCodeAti) && user_input.charCodeAti) <= 90 )? alphabet_upper : alphabet_lower;var j = alphabet.indexOfuser_input[i]);//console.logj);//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.logj);plaintext += alphabet[j];};//console.logplaintext);text[1].value = plaintext;
});

同理，为第二个按钮绑定点击事件，只是其中确定下标的判断条件有些许区别，其余的内容均相同，最后输出cryptograph到第二个结果框中。

submit[1].addEventListener'click', function){cryptograph = "";    //初始化forvar i = 0; i < user_input.length; i++){var alphabet = 65 <= user_input.charCodeAti) && user_input.charCodeAti) <= 90 )? alphabet_upper : alphabet_lower;var j = alphabet.indexOfuser_input[i]);j = j + 3) % 26;cryptograph += alphabet[j];}//console.logcryptograph);text[2].value = cryptograph;
})

JS编写——方法二：对象版

暂时有点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 bubbleSortint 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

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

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