每次想快速测试页面效果的时候，特别是在学习前端代码的时候，就想到W3school的那个试一试功能，一直都是用他们那个在线的版本测试，
今天发现网上有类似的代码，以后就不需要联网了，想测就可以直接用了。
下面把代码贴上
首先先建立一个样式文件tc.css
Css代码：
/* W3School 在线编辑工具 */
body#editor {
margin:0;
padding:0;
border:0;
text-align:left;
font: 12px Verdana, Arial, Helvetica, sans-serif;
background:#4180B6;
}
div#header {
color:#fff;
margin:0;
padding:0;
border:0;
height:90px;
background:#4180B6;
width:980px;
}
div#butt {
height:40px;
background:#C8D7E3;
}
div#test {
margin:0;
padding:0;
border:0;
height:495px;
background:#4180B6;
}
div#code {
float:left;
height:435px;
width:50%;
margin:0;
padding:0;
border:0;
background:#2C587C;
}
div#result {
float:left;
height:445px;
width:49%;
margin:0;
padding:0;
background:#880000;
}
#footer {
clear:both;
margin:0;
padding:5px 0 5px 5px;
border:0;
background:#000;
}
#header h1 {
margin:20px 0 0 0;
padding:0;
font-size:30px;
float:left;
}
#header #ad {
float:left;
margin:0 0 0 10px;
}
form {
margin:0;
padding:0;
border:0;
}
#butt input {
margin:10px 0 0 0;
background:yellow;
color:#293D6B;
width:180px;
font:12px Verdana, Arial, Helvetica, sans-serif;
}
#butt p {margin:0;}
#butt span {margin:0 0 0 5px;color:#293D6B;}
#code h2 {
margin:10px 0 6px 5px;
padding:0;
border:0;
font-weight:bold;
color:#eee;
font-size:14px;
}
#result h2 {
margin:10px 0 6px 5px;
padding:0;
border:0;
font-weight:bold;
color:#eee;
font-size:14px;
}
#code textarea{
margin:0;
padding:10px 0 0 5px;
border:0;
width:100%;
overflow:auto;
height:400px;
font:12px "Courier New", Courier, monospace;
}
#result iframe{
margin:0;
padding:0;
width:100%;
height:410px;
background:#fff;
}
#footer p {
color:#666;
margin:0;
}
a:link, a:visited {
text-decoration : underline;
color : #666;
background : transparent;
}
a:hover {
text-decoration : underline;
color: #666;
background : transparent;
}
a:active {
text-decoration : underline;
color : #666;
background : transparent;
}
|
之后在同级目录下创建一个新页面
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<link rel="stylesheet" type="text/css" href="tc.css" />
<title>在线测试工具</title>
</head>
<body id="editor">
<div id="test">
<form action="" method="post" target="i">
<div id="butt">
<p><span><input name="button" type="button" onclick="runCode()" value="TRY IT YOURSELF"></input></span><span>（请在下面的文本框中编辑您的代码，然后单击此按钮测试结果。）</span></p>
</div>
<div id="code">
<h2>编辑您的代码：</h2>
<textarea name="c" id="c">
<html>
<body>
<p>请点击文本标记之一，就可以触发相关控件：</p>
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
</body>
</html>
</textarea>
</div>
<div id="result">
<h2>查看结果:</h2>
<iframe name="i" src=""></iframe>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
<!--
function runCode() {
obj = document.getElementById("c");
if(obj.value==""){
alert("请输入要运行的代码内容");
return false;}
var winname = document.frames.i;
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.close();
}
runCode();
//-->
</script>
|
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！