仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面
传奇版本游戏私服棋牌游戏
资源爱好者学习教程仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面

仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面

学习教程tuzi2019-04-18 20:54:22A+A-

每次想快速测试页面效果的时候，特别是在学习前端代码的时候，就想到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>

点击这里复制本文地址

声明

本站发布所有广告信息、下载资源，均来自互联网，非本站自制，与本站无关。 如有侵犯您的合法权益请来信告之。我们会在三个工作日内予以清除。


本站中所有资料、资源文件均来自于网络搜索，仅作为技术学习研究之用，请必须在24小时内删除所下载文件，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。


本站保证站内提供的所有可下载资源（软件等等）都是按“原样”提供，本站未做过任何改动；但本网站不保证本站提供的下载资源的准确性、安全性和完整性；同时本网站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。 


访问本站的用户必须明白，[资源爱好者]对提供下载的软件等不拥有任何权利，其版权归该下载资源的合法拥有者所有。


本站所有资源均不提供相关技术服务，如果源码下载地址失效则请联系站长进行补发。


本站所有资源展现图片仅供参考

学习教程w3school

相关文章

资源爱好者 © 本站发布所有资源，均来自互联网，非本站自制，分享目的仅供大家学习与参考，与本站无关。
如有侵犯您的合法权益请来信告之。我们会在三个工作日内予以清除。邮箱：admin?aihao.org
关于我们|广告合作|网站地图|冀ICP备14009590号|冀公网安备 13018302000072号