首页 > 代码库 > 在线运行HTML代码器(二)

在线运行HTML代码器(二)

在线运行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.valuehttp://www.mamicode.com/= ""); //当textarea中的值为tips,则清空。说明:如果&&左侧表达式的值为真值,则返回右侧表达式的值。            };                        // 恢复tips            codeinp.onblur = function() //            {                var code = codeinp.value;                code == "" && (codeinp.value = http://www.mamicode.com/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代码器(二)