转自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. Matlab从一系列图片导出AVI视频，导出GIF动图

    平台:Win7,Matlab 2014a 从一系列图片导出AVI视频的M代码如下: clear all; % 清除变量 % 官方示例,命令窗口输入“doc VideoWriter” writerObj ...

  2. Ubuntu Sublime Text 设置等宽字体

    { "font_face": "DejaVu Sans Mono", "font_size": 10, "word_wrap&qu ...

  3. C# 之泛型详解

    转自牛人博客:http://www.blogjava.net/Jack2007/archive/2008/05/05/198566.html 鄙人才疏学浅,经常遇到泛型,一知半解,用的时候也是模糊不清 ...

  4. 返回顶部demo

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

  5. LeetCode-Combinations

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...

  6. GROUP与HAVING的使用

    SELECT pub_name, state,SUM(state) AS 总数 FROM publishers GROUP BY pub_name, state HAVING SUM(state)&g ...

  7. Windows下利用虚拟机运行FSL 安装和配置

    FSL是牛津大学FMRIB开发的用于分析功能磁共振影像的科研软件包. 运行要求:windows7或vista操作系统,10G硬盘空间,4G内存. 从FSL官网上下载Centos6的虚拟盘(FSLVm6 ...

  8. Oracle Hints详解

    在向大家详细介绍Oracle Hints之前,首先让大家了解下Oracle Hints是什么,然后全面介绍Oracle Hints,希望对大家有用.基于代价的优化器是很聪明的,在绝大多数情况下它会选择 ...

  9. netflix:Conductor微服务编排引擎

    项目地址: https://github.com/Netflix/conductor Conductor 是 Netflix 受需要运行全球流媒体业务流程的启发,构建的基于云的微服务编排引擎. Con ...

  10. AT Tool --- android手机发送at指令

    之前网上也有一款类似的软件,估计是华为内部人员开发的,不过很变态,不但只支持华为的几款手机,而且只能发一条AT命令,然后就不让你发了:所以很气愤,今天花了一天时间自己写了这么款程序,而且是支持所有An ...