canRun
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title> 6 JavaScript/HTML格式化 - 站长工具 7 </title> 8 <link href="https://files.cnblogs.com/Zjmainstay/toolsite.css" rel="stylesheet" type="text/css"> 9 <script src="https://files.cnblogs.com/Zjmainstay/base.js" type="text/javascript"></script> 10 <script src="https://files.cnblogs.com/Zjmainstay/jsformat.js" type="text/javascript"></script> 11 <script src="https://files.cnblogs.com/Zjmainstay/htmlformat.js" type="text/javascript"></script> 12 </head> 13 <body> 14 <div class="wrap"> 15 <div class="main"> 16 <script type="text/javascript"> 17 function do_js_beautify() { 18 document.getElementById('beautify').disabled = true; 19 js_source = document.getElementById('content').value.replace(/^\s+/, ''); 20 tabsize = document.getElementById('tabsize').value; 21 tabchar = ' '; 22 if (tabsize == 1) { 23 tabchar = '\t'; 24 } 25 if (js_source && js_source.charAt(0) === '<') { 26 document.getElementById('content').value = style_html(js_source, tabsize, tabchar, 80); 27 } else { 28 document.getElementById('content').value = js_beautify(js_source, tabsize, tabchar); 29 } 30 document.getElementById('beautify').disabled = false; 31 return false; 32 } 33 function pack_js(base64) { 34 var input = document.getElementById('content').value; 35 var packer = new Packer; 36 if (base64) { 37 var output = packer.pack(input, 1, 0); 38 } else { 39 var output = packer.pack(input, 0, 0); 40 } 41 document.getElementById('content').value = output; 42 } 43 function Empty() { 44 document.getElementById('content').value = ''; 45 document.getElementById('content').select(); 46 } 47 function GetFocus() { 48 document.getElementById('content').focus(); 49 } 50 </script> 51 <form> 52 <div class="box"> 53 <div id="b_1"> 54 <h1> 55 <div class="titleft"> 56 <a href="http://tool.chinaz.com/Tools/JsFormat.aspx"> 57 JavaScript/HTML格式化工具 58 </a> 59 </div> 60 </h1> 61 <div class="box1"> 62 <div style="color:#006AAD;font-size:16px;font-weight:bold;" align="center"> 63 JavaScript/HTML格式化 64 </div> 65 <div style="padding-top:10px;" align="center"> 66 <textarea id="content" name="content" style=" 850px; border: 1px solid rgb(197, 226, 242); height: 300px; overflow: visible;" 67 cols="20" rows="20"> 68 </textarea> 69 </div> 70 <div style="padding:7px 0px 0px 6px;"> 71 <select name="tabsize" id="tabsize"> 72 <option value="1"> 73 制表符缩进 74 </option> 75 <option value="2"> 76 2个空格缩进 77 </option> 78 <option value="4" selected="selected"> 79 4个空格缩进 80 </option> 81 <option value="8"> 82 8个空格缩进 83 </option> 84 </select> 85 <input class="but2" value="格式化" onclick="return do_js_beautify()" id="beautify" 86 type="button"> 87 <input class="but2" value="普通压缩" onclick="pack_js(0)" type="button"> 88 <input class="but2" value="加密压缩" onclick="pack_js(1)" type="button"> 89 <input class="but2" value="清空结果" onclick="Empty();" type="button"> 90 </div> 91 </div> 92 </div> 93 </div> 94 </form> 95 <div class="box"> 96 <div id="b_14"> 97 <h1> 98 <div style="float:left;"> 99 工具简介 100 </div> 101 </h1> 102 <div class="box1"> 103 <span class="info2" style=" font-size: 14px; line-height: 24px; text-align: left;white-space:normal; 860px;overflow:hidden;"> 104 可以把混乱的代码进行分行，整齐的显示出来。 105 </span> 106 </div> 107 </div> 108 <div style=" height:5px;"> 109 </div> 110 </div> 111 </div> 112 </div> 113 </body> 114 </html>
PS：纯HTML，可运行，点击左上方Tips链接可至源码运行页。