现在的位置: 首页 > 综合 > 正文

仅需一个HTML页面即可查看你编写的JavaScript执行结果!

2012年01月12日 ⁄ 综合 ⁄ 共 1840字 ⁄ 字号 评论关闭

      工作学习时有时候会碰到要查看自己编写的JavaScript代码的执行结果,在Firefox里面还好办,有FireBug呢,但是IE6里面就不好弄了,所以,闲着无聊就做了一个简单的页面方便查看JavaScript代码执行结果, js代码可以包含单行(//注释内容)和多行注释(/*注释内容*/) (内容超级初级,自由玩乐,高手请飘过)。

 

完整HTML页面代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>JavaScript Test Tool!</title>
  <meta name="Author" content="yakoo5@163.com">
  <meta name="Description" content="一个可直接执行JavaScript的网页">
 </head>
 <body>
    <br/>
    <br/>
    <h2>
     <font color="blue">一个可直接执行JavaScript的网页!</font>
    </h2>
    Author:<a href="mailto:yakoo5@163.com">yakoo5@163.com</a><br/>
    Date:2010-11-26<br/>
    Version:1.1

    <hr/>  
    <script type="text/javascript" language="javascript">
        function executeJS(){
            var codes = document.getElementById('codes').value;
          
            if( '' == codes ){
                alert('请输入代码!');
                return;
            }

            var codeArray = codes.split('\n');
          
            var pureCode = '';    // 存放除去"//"单行注释的纯JavaScript代码              
            for(var i=0; i<codeArray.length; i++){
                var code = codeArray[i];               
                if( code.indexOf('//') > -1 ){
                     code = code.substr(0, code.indexOf('//'));
                }else if( '' != code && !/^\s*$/.test(code)){
                     code = trim(code);
                }
                pureCode += code + '\n';
            }
          
            try{
                eval(pureCode);
            }catch(exception){
                alert(exception);
            }
        }
       
        // 去除字符串两端的空格
        function trim(str){
            if( null != str ) return str.replace(/^\s+/, '').replace(/(\s+)$/, '');
            else return str;
        }
    </script>
    <br/>

    请在下面文本框中输入JavaScript代码,单击&nbsp;&nbsp;

    <input type="button" value="执   行" onclick="executeJS()">

    &nbsp;&nbsp;查看结果.
    <br/>
    <textarea id="codes" rows="15" cols="100">alert('你好!');</textarea>
 </body>

</html>

可复制上面代码保存为HTML页面查看效果。

抱歉!评论已关闭.