转自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. 使用PHP将长文章分页

    如何分页 手动分页:一般在编辑内容时加入特殊分页标记,如{pages},提交后,PHP程序会根据分页符处理分页,生成不同的静态页面.这种分页方法分页准确,但是需要人工手动添加分页符,工作量大. 自动分 ...

  2. setAttribute,,,getAttribute,,,,

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. linux 系统性能分析

    CPU篇 top 1时,看各个cpu是否均衡:看每个cpu的使用率分布是否合理 看load average的负载( 1分钟.5分钟.15分钟前到现在的平均值) 看内存的使用 看进程数运行.休眠数 M看 ...

  4. error LNK2019: 无法解析的外部符号 _WinMain@16，该符号在函数 ___tmainCRTStartup 中被引用

    MSVCRTD.lib(crtexew.obj) : error LNK2019: 无法解析的外部符号 _WinMain@16,该符号在函数 ___tmainCRTStartup 中被引用 Debug ...

  5. 如何在一个网站或者页面写js

    如何在一个网站或者页面写js: 1. JS的分层(功能):jquery(tools)  组件(ui)  应用(app).mvc(backboneJS) 2. JS的规划(管理):避免全局变量和方法(命 ...

  6. ABBYY FineReader 12对系统有哪些要求

    ABBYY FineReader是市场领先的ocr文字识别软件,可快速方便地将扫描的文档.PDF文档和图像文件(包括数码照片)转化为可编辑.可搜索的格式.每个软件都有其安装运行的系统要求,ABBYY ...

  7. 理解jquery的$.extend()、$.fn和$.fn.extend()

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  8. Window memcache 使用

    一.memcache配置 1. 下载memcache 32位系统 1.2.5版本:http://static.runoob.com/download/memcached-1.2.5-win32-bin ...

  9. 分享一个绿色版本 sql server 查询器，

    首先感谢原作者 源码来原于网络 此查询器增加了一些功能, 可以高亮显示 导出sql 语句    可以把左边树型拖入脚本编辑器 http://pan.baidu.com/s/1dDjaSbn

  10. logstash无法使用conf启动

    最近刚开始学习使用logstash,再安装好后准备验证下第一个demo的时候,出现了问题 Error: Expected one of #, input, filter, output at line ...