本文介绍一个基于HTML和JavaScript的在线代码编辑工具，支持对JS代码进行格式化显示、在线运行以及保存操作。通过引入外部CSS样式美化界面，利用JavaScript控制代码执行流程，并提供复制和保存功能，方便开发者快速测试和保存代码片段。
JS格式代码在线编辑与运行工具
<html> <head> <title>JSer </title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <style> /* Global CSS */ * { padding:0px; margin:0px; font-size:13px; font-family: arial 宋体; } body { overflow:auto; border:0px none black; background-color:buttonface; } li { margin:0px 0px 0px 40px; padding:2px 4px; } /* Class CSS */ .quote { color:#999; } .comments { color: #009090; } .indent { margin-left:25px; } .regexp { color:#F000F0; } /* Identified CSS */ #divTools { height:20px; border-bottom:1px solid #555; padding-left:15px; } #divTools a { color:navy; text-decoration:none; height:20px; line-height:20px; padding:0px 25px; } #divTools a:hover { color:white; background-color:navy; text-decoration:none; height:20px; line-height:20px; } #divJSInput { display:none; width:600px; height:450px; border:2px outset buttonface; position:absolute; background-color:buttonface; z-Index:2; } #divJSInputTitle { color:white; background-color:navy; height:20px; line-height:20px; padding:0px 10px; cursor:default; } #txtJSInput { width:598px; height:406px; overflow:auto; padding:4px 8px; background-color:white;} #divJSInputBar { height:24px; padding:0px 4px; } #divJSInputBar input { width:110px; height:22px; border:1px solid #555; line-height:20px; } #divJSOutput { background-color:white; border:1px inset buttonface; width:100%; height:500px; overflow:auto; } #divWaiting { display:none; width:400px; height:60px; border:1px solid buttonface; position:absolute; background-color:#E0F0F0; z-Index:3; text-align:center; padding-top:10px; } #divWaiting input { width:140px; height:22px; border:1px solid #555; line-height:20px; cursor:default; margin-top:4px; } </style> </head> <body> <div id="divTools"> Input JS </div> <div id="divJSInput"> <div id="divJSInputTitle">Please Input the JS:</div> <textarea id="txtJSInput"></textarea> <div id="divJSInputBar"> <input type="button" value="OK" onclick="execJSInput();" /> <input type="button" value="Cancel" onclick="hideJSInput();" /> </div> </div> <div id="divJSOutput"></div> <div id="divWaiting"> Processing...<span id="spnProcess"></span> <input type="button" value="Stop" onclick="stopExec();" /> </div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]