解码文字编码与还原文字编码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<meta name="viewport" content="width=750,user-scalable=no">
 5 　　<meta charset="UTF-8">
 6 　　<title></title>
 7 　　<style type="text/css">
 8 　　　　*{
 9 　　　　　　margin: 0;
10 　　　　　　padding: 0;
11 　　　　}
12 　　　　p{
13 　　　　　　width: 620px;
14 　　　　　　height: 100px;
15 　　　　　　position: relative;
16 　　　　}
17 　　　　input{
18 　　　　　　width: 300px;
19 　　　　　　height: 80px;
20 　　　　　　border-color: green;
21 　　　　　　border-radius: 8px;
22 　　　　　　outline: none;
23 　　　　　　position: absolute;
24 　　　　　　bottom: 0;
25 　　　　　　left: 0;
26 　　　　}
27 　　　　div{
28 　　　　　　width: 80px;
29 　　　　　　height: 30px;
30 　　　　　　margin: 20px 0;
31 　　　　　　text-align: center;
32 　　　　　　line-height: 30px;
33 　　　　　　background: green;
34 　　　　　　color: #fff;
35 　　　　　　cursor: pointer;
36 　　　　　　border-radius: 6px;
37 　　　　}
38 　　　　span{
39 　　　　　　display: inline-block;
40 　　　　　　width: 300px;
41 　　　　　　height: 80px;
42 　　　　　　border-radius: 8px;
43 　　　　　　border: 2px solid green;
44 　　　　　　position: absolute;
45 　　　　　　bottom: 0;
46 　　　　　　right: 0;
47 　　　　　　line-height: 80px;
48 　　　　　　text-overflow: ellipsis;
49 　　　　　　overflow: hidden;
50 　　　　　　outline: none;
51 　　　　}
52 </style>
53 </head>
54 <body>
55 　　<p>
56 　　　　<input type="text" class="inputs" placeholder="请输入任何您想转化的字符，或者表情"/>
57 　　　　<span contenteditable="true"></span>
58 　　</p>
59 　　<div class="btns">解码</div>
60 　　　　<p>
61 　　　　　　<input type="text" class="input2"/>
62 　　　　　　<span contenteditable="true"></span>
63 　　　　</p>
64 　　<div class="btns2">还原</div>
65 　　<script src="../jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
66 　　<script type="text/javascript">
67 　　　　//escape解码
68 　　　　$(".btns").on('click',function(){
69 　　　　　　var str = $('.inputs').val();
70 　　　　　　var str2 = escape(str);
71 　　　　　　$('.input2').val(str2);
72 　　　　　　$('span:eq(0)').text(str2);
73 　　　　})
74 　　　　//unescape还原
75 　　　　$(".btns2").on('click',function(){
76 　　　　　　var str = $('.input2').val();
77 　　　　　　var str2 = unescape(str);
78 　　　　　　$('span:eq(1)').text(str2);
79 　　　　})
80 　　</script>
81 </body>
82 </html>
posted on 2017-09-16 15:20 佑之以航阅读(224) 评论(0) 编辑收藏举报