转自http://fhqllt.iteye.com/blog/836186

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

仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面的更多相关文章

  1. Python 从入门到实践 试一试 参考代码

    这两天学习Python 看了python从入门到实践的书籍,里面有课后题“试一试” 然后就跟着写了,代码在以下地址,如果需要自取 https://files.cnblogs.com/files/fud ...

  2. Python编程-从入门到实践 Eric Matthes 著 袁国忠 译 - - 第二章 动手试一试

    因为第一章的动手试一试基本都是探索性的,所以直接进入第二章. # 2.2 动手试一试 # 2_1 简单消息: 将一条消息存储到变量中,再将其打印出来. message = 'python 编程从入门到 ...

  3. 简单的试了试async和await处理异步的方式

    今天无意中就来试了试,感觉这个新的方法还是非常行的通的,接下来我们上代码 这段代码想都不用想输出顺序肯定是//null null 233,当然出现这个问题还是因为它是同步,接下来我们就进行异步方式来处 ...

  4. 试一试 GraphQL

    GraphQL 简介 一种用于 API 的查询语言. GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时. GraphQL 对你的 API 中的数据提供了一套易于理解的完整 ...

  5. 关于w3school的html5部分output 元素实例代码（点亲自试一试进去）的问题纠正

    修复: 将原来的 =  号修改成 <input type="button" onclick="resCalc()" value ="=" ...

  6. 试来试去，WIN下最简单的WIN API开发工具，Pelles C就好啦

    昨晚试过N个,不是太大,就是不容易和WIN API集成. 今早一试就灵了个.... Pelles C. Pelles C是一款windows下的C IDE,支持调试,且为免费.它有一个高效率的链接器, ...

  7. C#实现Dll(OCX)控件自动注册的两种方法 网上找的 然后 自己试了试 还是可以用的

    尽管MS为我们提供了丰富的.net framework库,我们的程序C#开发带来了极大的便利,但是有时候,一些特定功能的控件库还是需要由第三方提供或是自己编写.当需要用到Dll引用的时候,我们通常会通 ...

  8. myeclipse激活法，可以试一试

    我的myeclipse2014也是这样激活: 第一步:输入任意用户名 第二步:点击Systemid... 按钮,自动生成本机器的systemid. 第三步: 点菜单Tools->RebuildK ...

  9. Python自学:第三章 动手试一试 3-4、3-5

    # -*- coding: GBK -*- liebiao = ["zhang", "li", "wang", "zhou&quo ...

随机推荐

  1. bootstrapCDN和本地化

    因为公司网络环境较差和自己是菜鸟的原因,很简单的事情折腾了不少时间.测试开发的网页时候 更新速度总是很慢,这跟使用bootstrapCDN有关系,因为每次更新,它都要重新访问cdn.bootstrap ...

  2. rtmp转m3u8

    不是所有的地址改成这样都能播 需要自己测试 先说一下rtmp的其中rtmp的常见的差不多是3种 1.一种是wowza服务器的 比如这个地址rtmp://116.55.245.135:8096/live ...

  3. LINUX各目录用处

    目录 应放置档案内容 / 根目录 /bin 放置可执行文件 /usr/bin 用户可执行文件 /usr/local/bin 用户本地可执行文件 /boot 开机需用文件,文件下vmlinuz为kern ...

  4. MyEclipse JAX-WS Web Service

    在Myeclipse8.5下开发Web service程序,目前系统支持的开发框架有3个,JAX-WS,REST(JAX-RS),XFire.其中系统建议不要使用XFire 的框架,可能是要被淘汰了( ...

  5. js中属性和方法的类型和区别

    对象的属性:私有属性(var).类属性(静态属性).对象属性(this).原型属性(prototype). 对象的方法: 私有方法(funtion).类方法(静态方法).对象方法(this).原型方法 ...

  6. SSM框架的整合思路&功能实现

    这是我第一篇博客,关于SSM框架的整合思路以及简单功能实现. 首先,最近刚刚学习Spring+SpringMVC+Mybatis,在开发时遇到形形色色的问题,周遭人也为我提供了一些思路,我会一点点整理 ...

  7. 自执行函数与setTimeout结合计算

    var v1=0,v2=0,v3=0;        for(var i=1;i<=3;i++){            var i2=i;            (function(){   ...

  8. 在生产环境记录http请求参数

    StringBuilder strParam = new StringBuilder(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + ...

  9. BingHack，Bing旁注API查询工具

    现在旁注查询都失效了.通过网上查询发现有人说可以通过微软的API进行旁注查询 https://datamarket.azure.com/dataset/explore/bing/search 注册登录 ...

  10. iOS_Quartz2D之涂鸦板

    响应者对象:继承了UIResponder的对象 触摸事件:一根或多根手指: 开始触摸: - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent ...