转自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. maven - dependencies与dependencyManagement的区别

    1.DepencyManagement应用场景 当我们的项目模块很多的时候,我们使用Maven管理项目非常方便,帮助我们管理构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行 ...

  2. Xshell访问虚拟机内Linux

    这段时间在家,需要用到Linux,身边的电脑硬盘很小,装双系统用的频率也不高还浪费磁盘空间,还是使用虚拟机,通过Xshell管理虚拟机内Ubuntu还是比较方便的.很早之前学习hadoop的时候就是用 ...

  3. Linux软件的安装方法！！！

    1.yum/rpm(*.rpm) 包管理器:直接yum/rpm安装. 优点:是全自动化安装,不需要为依赖问题发愁,缺点是自主性太差,软件的功能.存放位置固定,不易变更. 2.源码包(*.tar.gz) ...

  4. RTSP协议媒体数据发包相关的细节

    最近完成了一RTSP代理网关,这是第二次开发做RTSP协议相关的开发工作了,相比11年的简单粗糙的版本,这次在底层TCP/IP通讯和RTSP协议上都有了一些新的积累,这里记录一下.基本的RTSP协议交 ...

  5. 【转载】oracle dbms_metadata.get_ddl的使用方法总结

    转自:http://www.jb51.net/article/39715.htm dbms_metadata.get_ddl()用于获取对象的ddl,其具体用法如下. 注意:在sqlplus里,为了更 ...

  6. ListView只允许展开其中一个item的方法

    xml文件代码: <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:an ...

  7. CSS中的display属性

    CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...

  8. Telnet弱口令猜解【Python脚本】

    telnet 弱口令猜解脚本 测试环境:window2003.centos7 #! /usr/bin/env python # _*_ coding:utf-8 _*_ import telnetli ...

  9. 编译.NET项目的时候报错错误“ResGen.exe”已退出，代码为 -1073741701

    解决的办法如下: 1.关闭所有Visual Studio: 2.以管理员的身份打开命令提示窗口:(开始-运行-cmd)         //有人说要使用vs tools 里面的控制台 亲试无卵用 3. ...

  10. Git远程仓库(github

    一.创建远程仓库(github) 首先到https://github.com注册一个账号,创建自己的Git,点击repositories,再点new 名字自定义,比如叫fansik,选择public点 ...