在线运行HTML代码器（二）和前面的（一）大同小异，关键部分为JS代码，这次是把运行器所有的JS功能集中放在一起。以下为HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>在线运行HTML代码器（二）</title>

<script type="text/javascript" src="runcode.js"></script>

<style>

    #codeinp { font-size: 14px; font-family: 'Courier'; }

    .btnbar { margin-top: 5px; }

    a { font-size:14px; text-decoration: none; margin: 5px; }

</style>

</head>

<body id="nv_tools" class="pg_runcode  widthauto" onkeydown="if(event.keyCode==27) return false;">

    <div class="content">

        <div id="code" class="textbox">

            <div><textarea id="codeinp" rows="8" cols="40">将HTML代码粘在此处，点击运行即可。</textarea></div>

        </div>

        <div class="btnbar">

            <a id="btclear" class="btns" href="javascript:void(0);" hidefocus="true">清空</a>

            <a id="btrun" class="btns hilite" href="javascript:void(0);" hidefocus="true">运行</a>

        </div>

    </div>

</body>

</html>

以下为JS代码：

(

    function()

    {

        window.onload = function()

        {

            var tips = "将HTML代码粘在此处，点击运行即可。";

            var codeinp = document.getElementById("codeinp");

            var btclear = document.getElementById("btclear");

            var btrun = document.getElementById("btrun");

            // 点击框后tips消失

            codeinp.onfocus = function()

            {

                var code = codeinp.value;

                code == tips && (codeinp.value = ""); //当textarea中的值为tips，则清空。说明：如果&&左侧表达式的值为真值，则返回右侧表达式的值。

            };

            // 恢复tips

            codeinp.onblur = function() //

            {

                var code = codeinp.value;

                code == "" && (codeinp.value = tips); // 当textarea中的值为清空状态时，则改写为tips

            };

            // 点击“清空”清空textarea

            btclear.onclick = function()

            {

                codeinp.value = ""; // 点击“清空”时textarea框中的值被清空

                codeinp.focus(); // 光标聚焦textarea框

            };

            // 点击“运行”运行

            btrun.onclick = function()

            {

                var code = codeinp.value;

                if(code != tips)  // 如果textarea中的值不是tips，则运行代码，否则弹窗alert

                {

                    var newwin = window.open('','','');

                    newwin.opener = null;

                    newwin.document.write(code);

                    newwin.document.close();

                }

                else

                {

                    alert("请将需要运行的HTML填写到输入框后再运行！");

                }

            };

        }

    }

)();

在线运行HTML代码器的更多相关文章

  1. 发现一个可以在线运行JS代码的网站

    平时可以在这里玩 http://jsbin.com/

  2. 在线运行python代码-python代码运行助手

    https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432523496782e ...

  3. 在线运行.NET代码

    https://dotnetfiddle.net/ https://try.dot.net/ C# 发送Http协议 模拟 Post Get请求 1.参数 paramsValue的格式 要和 Requ ...

  4. 网页HTML代码在线运行器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  6. 浏览器地址栏运行JavaScript代码

    这个很多人应该还是知道的,在浏览器地址栏可以直接运行JavaScript代码,做法是以javascript:开头后跟要执行的语句.比如: javascript:alert('hello from ad ...

  7. 通过jstack定位在线运行java系统故障_案例1

    问题描述: 在一个在线运行的java web系统中,会定时运行一个FTP上传的任务,结果有一天发现,文件正常生成后却没有上传. 问题初步分析: 1.查看日志文件 发现这个任务只打印了开始进入FTP处理 ...

  8. 实现Vue 的 markdown 文档可以在线运行（vue-markdown-run）

    闲暇时间我用Vue框架写了一个博客,编辑器是用的markdown文本的形式,介绍性+描述完全能满足我的需求,但是,如果想在线运行我markdown文本中的Vue组件代码,则无法实现了, 于是我就自己写 ...

  9. C#在线运行--cmd方法

       此次C#在线运行采用cmd.exe用csc对文件进行编译,然后再运行的思路实现在线运行的效果.不过会生成二个文件(.cs和.exe),可能需要定期清除临时文件夹. 首先利用时间戳生成唯一文件名, ...

随机推荐

  1. 【转载！】关于C#的RawSocket编程的问题

    Q:你好! 看过了你在csdn上发表的<用C#下的Raw Socket编程实现网络封包监视>,觉得很感兴趣,而且对我的帮助很大.不过在调试的过程中遇到一些问题,特此向你请教一下.谢谢! 首 ...

  2. feel

    昨天我大脑中还在盘旋几个关键字:健康 选择 方向 方法今天只有选择了,健康 是你选择了一种生活习惯,你能掌控的也就是好的习惯,选择了一种正确的价值观,选择了一个好的开始方向有很多,你的选择是结果方法 ...

  3. C# 处理csv格式的Excel文件代码

    public class CSVFileHelper { /// <summary> /// 将DataTable中数据写入到CSV文件中 /// </summary> /// ...

  4. 窗体皮肤实现 - 实现简单Toolbar（六）

    自定义皮肤很方便,基础开发的工作也是很大的.不过还好一般产品真正需要开发的并不是很多.现在比较漂亮的界面产品都会有个大大的工具条. Toolbar工具条实现皮肤的方法还是可以使用Form的处理方案.每 ...

  5. hdu 4631Sad Love Story<计算几何>

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=4631 题意:依次给你n个点,每次求出当前点中的最近点对,输出所有最近点对的和: 思路:按照x排序,然后用s ...

  6. Oracle11g install Bbed

    1.sbbdpt.o ssbbded.o bbedus.msb文件链接地址: http://pan.baidu.com/s/1c0tHMCS 2.DB:  Oracle Database 11g En ...

  7. rman 命令

    OS: Oracle Linux Server release 5.7 DB: Oracle Database 11g Enterprise Edition Release 11.2.0.3.0 - ...

  8. epoll重要

    EPOLL事件分发系统可以运转在两种模式下:Edge Triggered (ET).Level Triggered (LT). LT是缺省的工作方式,并且同时支持block和no-blocksocke ...

  9. Swift function how to return nil

    这两天在学习Stanford出品的iOS7的课程,这个课程去年也看过,但是看到第3课就不行了,满篇的OC,把人都搞晕了.这段时间因为要写个iOS的App,正好赶上了Swift问世,所以趁着这股劲继续学 ...

  10. Matlab 支持向量机（SVM）实现多分类

    1.首先,你需要安装完成Matlab. 2.将libsvm-3.17.zip和drtoolbox.tar文件解压到:libsvm-3.17文件夹和drtoolbox,并放到MATLAB的工具箱安装目录 ...