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 相关文章推荐
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
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
一段防盗连的PHP代码
2006/12/06 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
python实现图书借阅系统
2019/02/20 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
自我评价格式
2014/01/06 职场文书
领导调研接待方案
2014/02/27 职场文书
个人求职信范文
2014/05/24 职场文书
趣味运动会广播稿
2014/09/13 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Python Django获取URL中的数据详解
2021/11/01 Python
Python中time与datetime模块使用方法详解
2022/03/31 Python