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 620px; 14 height: 100px; 15 position: relative; 16 } 17 input{ 18 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 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 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>