JavaScript实现HTML代码预览功能，显示代码运行效果，将HTML代码复制到代码输入框内或直接在代码输入框内进行编写代码，点击运行代码按钮后，可立即查看代码运行效果，方便web设计开发。
源代码
<!DOCTYPE html>
<html>
<head>
<title>HTML代码预览</title>
<style type="text/css">
body{margin-top: 0px;font-size: 9pt;margin-LEFT: 4px;margin-right: 0px;font-family: "微软雅黑"}
a{font-weight: 400;font-size: 13px;color: black;text-decoration: none}
a: hover{font-weight: 400;font-size: 13px;color: red;text-decoration: underline}
a: active{cursor: hand;color: #ff0033}
.style1{font-size: 30px;}
.style2{font-weight: bold;font-size: 20px;}
#input_btn input{
border:1px solid #8599b1;font-size:9pt;margin-right:6px;padding:3px;cursor:pointer;
}
</style>
<meta http-equiv=Content-Type content="text/html; charset=gbk">
</head>
<body>
<center>
<span><font face="Arial">HTML代码预览</font></span>
</center><br>
<center>
<p><span><font >请在下面窗口中输入html代码</font></span></p>
<script language=Javascript>
var Array();var userAgent=navigator.userAgent.toLowerCase();var is_opera=userAgent.indexOf('opera')!=-1&&opera.version();var is_moz=(navigator.product=='Gecko')&&userAgent.substr(userAgent.indexOf('firefox')+ 8,3);var is_ie=(userAgent.indexOf('msie')!=-1&&!is_opera)&&userAgent.substr(userAgent.indexOf('msie')+ 5,3);Array.prototype.push=function(value){this[this.length]=value;return this.length;}
function $(objname){return document.getElementById(objname);}
function runCode(objname){var winname=window.open('',"_blank",'');var obj=$(objname);winname.document.open('text/html','replace');winname.opener=null
winname.document.write(obj.value);winname.document.close();}
function trestart(){
if (script) {
clear = confirm("确定要清除吗？",'');
if(clear) {
document.script.reset();
document.script.value = "";
}
}
}
function test(){
{
temp = document.script.content.value;
testwin= open("", "testwin","status=no,menubar=yes,toolbar=no");
testwin.document.open();
testwin.document.write(temp);
testwin.document.close();
}
}
function about(){
alert("html代码预览程序\n可以将web代码运行显示出效果页面")
}
function help(){
OpenWindow=window.open("", "newwin","height=220,width=470,toolbar=no,scrollbars="+scroll+",menubar=no");
OpenWindow.document.write("<body bgcolor='white' text='black' alink='blue'vlink='blue' link='blue'><title>帮助信息</title>")
OpenWindow.document.write("<center>把html代码放到代码输入框</center><br/>点击【运行代码1】按钮，将打开新的窗口页面进行效果演示<br/>点击【运行代码2】按钮，将打开新的标签页(与浏览器默认打开页面有关)演示效果。<br/>点击【全选代码】按钮，可以快速将输入框内容全部选中。<br/>点击【清除】按钮，将清空输入框内容。<br/>")
OpenWindow.document.write("<center><a href='mailto:postmaster@weisico.com' target='main'>写信给postmaster@weisico.com</a></center><br>")
OpenWindow.document.write("<center><a href='javascript:close()'>关闭本窗口</a></center>")
OpenWindow.document.close()
self.name="main"
}
</script>
<form name="script"><textarea name="content" id="content" rows="12" wrap=off cols="60" style="background-color:#e1eeff; border: 1px solid #b5c3d3;font-size: 12pt;margin-bottom:6px;padding:10px;"></textarea> <br/>
<div id="input_btn">
<input onclick="test()" type="button" value="运行代码1">
<input type="button" name="Submit" value="运行代码2" onclick="runCode('content')"/>
<input type="button" name="Submit3" value="全选代码" onclick="$('content').select();"/>
<input onclick="trestart()" type="button" value="清除">
<input onclick="about()" type="button" value="关于">
<input onclick="help()" type="button" value="帮助">
<div>
</form>
<center>
<div>
<center>
<table id="autoNumber1" style="border-collapse: collapse" bordercolor=#111111
cellSpacing=0 cellPadding=0 width=360 border=0>
<Tbody>
<tr>
<td>
<P><span style="font-size: 9pt">HTML代码在线运行效果演示Demo代码<br><font
color=#ff0033><br/><!DOCTYPE html><br/><html><br/><head><br/><title>HTML代码在线运行效果演示</title><br/></head><br/><body><br/>
欢迎访问<a href="http://www.weisico.com" target="_blank">weisico.com！</a><br/>
</body><br/></html></font></span></p></td></tr></Tbody></table></center></div>
</body>
</html>
