JavaScript实现的简单加密解密操作示例


Posted in Javascript onJune 01, 2018

本文实例讲述了JavaScript实现的简单加密解密操作。分享给大家供大家参考,具体如下:

JavaScript实现对内容的加密和解密。加密,转成编码。解密则是编码转字符串。

<html>
<head>
<meta charset="utf-8" />
<title>3water.com JS加密解密</title>
</head>
<body>
 <h1> 加密解密 </h1>
 <input type="text" id="secret" /> 
 <input type="button" value="加密" onclick="encode()">
 <input type="button" value="解密" onclick="decode();">
<script>
// 加密
function encode()
{  
  // var s = secret.value;
  // s 是一个字符串, 类型: String
  // 根据 s 来创建一个字符串对象
  // str 的类型是: Object
  // var str = new String(s);
  // length 是获取字符串对象的长度,也就是说有多少个字符
  // str.length
  var str = secret.value;
  var r = "";
  // string 类型的可以当做字符串对象来用
  for (var i = 0; i < str.length; i++)
  {
    // 取出下标为 i 字符的编码
    var code = str.charCodeAt(i);
    // 将字符对应的编码,拼接到一个空字符串上
    r += code;
    // 每个符号后,添加 , 分割
    r += ",";
  }
  // secret.value 
  // 设置输入框的内容为 r
  secret.value = r;
}
// 使用到知识点(1)---如何将一个 数字 转换成对应的 字符
// String.fromCharCode 
// 函数功能: 将 数字 转换成对应的 字符
// String 其实是系统的一个对象
// document.write(  String.fromCharCode(97) );
/*
var s = "97,98,99,";
// 字符串对象中 split 方法
// 作用: 按照参数 分割 字符串
// 返回值: 分割之后的 数组
var arr = s.split(",");
// 数组中多了一个空白的元素,如何处理?
// 删除数组中最后一个元素
arr.pop();
document.write(arr);
//*/
// 解密
function decode()
{
  // 获取文本框中的字符串
  // 例如: 96,97,98
  var str = secret.value;
  // 思路:
  // 1. 按照 , 分割字符串
  // 2. 将每个 分割的子字符串 转换成 数字,再转换成 字符
  //   96 97 98
  // 3. 将还原的字符,拼接在一起,再设置到 input 中去
  var arr = str.split(",");
  // 用于拼接结果的
  var r = "";
  for (var i = 0; i < arr.length; i++)
  {
    // 获取加密后的 字符串的编码,是一个数字
    var code = parseInt(arr[i]);
    r += String.fromCharCode(code);
  }
  // 将拼接后的结果,设置到 input 中
  secret.value = r;
}
</script> 
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试运行结果如下:

JavaScript实现的简单加密解密操作示例

Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
Vue.js表单控件实践
Oct 27 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
JS引用传递与值传递的区别与用法分析
Jun 01 #Javascript
Express之托管静态文件的方法
Jun 01 #Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 #Javascript
详解Angular操作cookies方法
Jun 01 #Javascript
浅谈手写node可读流之流动模式
Jun 01 #Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 #Javascript
基于JS实现带动画效果的流程进度条
Jun 01 #Javascript
You might like
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
php 数组二分法查找函数代码
2010/02/16 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
利用Python实现手机短信监控通知的方法
2019/07/22 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python持续监听文件变化代码实例
2020/07/22 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
关于爱情的广播稿
2014/01/16 职场文书
请假条怎么写
2014/04/10 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
员工辞职信范文
2015/03/02 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
纪录片信仰观后感
2015/06/08 职场文书
校园安全主题班会
2015/08/12 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
python 逐步回归算法
2021/04/06 Python
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
使用Ajax实现进度条的绘制
2022/04/07 Javascript
Mysql 一主多从的部署
2022/05/20 MySQL