转自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. c51跑马灯

    ORG 0000HMOV 20H, #0FFHMOV 21H, #0FDHMOV 22H, #0FBHMOV 23H, #0F7HMOV 24H, #0EFHMOV 25H, #0DFHMOV 26H ...

  2. jQuery extend方法使用及实现

    一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...

  3. Surprise团队第四周项目总结

    Surprise团队第四周项目总结 项目进展 这周我们小组的项目在上周的基础上进行了补充,主要注重在注册登录界面的改进优化与美观,以及关于人计算法的学习与初步实现. 我们小组针对上次APP中界面出现的 ...

  4. 解决导入myeclipse的项目注释和中文是乱码

    1.先说真正解决我所遇到的问题的办法. 用记事本打开——另存为——格式改为UTF-8——保存后在myeclipse就正常显示了. 2.以下是网上找到的办法,试了一些并没有解决问题,但或许是中间必须的步 ...

  5. STM32下载调试驱动问题

    No Cortex-m SW device found解决办法 16.07.14 今天工作,遇到一个问题:用jlink采用SW下载模式时,一直显示No Cortex-m SW device found ...

  6. mysql 根据某字段特定值排序

    比如: 表 :user 字段:orders (值为 1,2,3) 要求根据字段  orders 按2 -> 1 -> 3 排序 使用以下语句实现SELECT *FROM userORDER ...

  7. linux命令之三

    0102 文档查阅指令 cat tac nl 简单查阅,-n  可显示行 more, less less is more 查询大文件,可分页. head tail 从头尾看.-n 限制行数. taif ...

  8. operating system

    一.对于子进程,系统调用fork()的返回值为0:而对于父进程,返回值为子进程的进程标识符

  9. LeetCode() Basic Calculator 不知道哪里错了

    class Solution {public:    int calculate(string s) {        stack<int> num;        stack<ch ...

  10. 你应该知道的那些Android小经验

    原文出处:http://jayfeng.com/ 做Android久了,就会踩很多坑,被坑的多了就有经验了,闲暇之余整理了部分,现挑选一些重要或者偏门的“小”经验做个记录. 查看SQLite日志 ad ...