js运行代码插件

js运行代码插件，在输入框输入代码，点击下面的运行按钮可以运行里面的代码，并且支持保存代码和打印代码，但这两个功能不兼容火狐。运行代码功能兼容主流浏览器。 1、在head区引入下面的代码

<style>  
#container #code{  
        width:400px;  
        height:200px;  
        resize:none;  
        background:none;  
        border:1px solid gray;  
}  
#container button ,#container .btn{  
    border:1px solid gray;  
    cursor:pointer;  
    padding:0px;  
    width:75px;  
    height:23px;  
}  
#container button:hover,#container .btn:hover{  
}  
</style>  
<script type="text/javascript">  
    function  Coder (id) {  
        this.id = id;  
        this.$ = function(id) {  
            return document.getElementById(id);  
        }  
        this.runcode  = function() {  
            var codeWin = window.open("about:blank","_blank")  
            codeWin.document.writeln(this.obj.value);  
            return codeWin;  
        }  
        this.savecode  = function() {  
            var codeWin = this.runcode();  
            var title = codeWin.document.title || "code" ;            
            codeWin.document.execCommand("SaveAs",false,title+".html");  
            codeWin.close();  
        }  
        this.printcode  =function() {  
            var codeWin = this.runcode();  
            codeWin.document.execCommand("Print",false,"");  
            codeWin.close();  
        }  
        this.init=function() {  
            this.obj = this.$(this.id);  
            var context = this;  
            this.$("run").onclick = function() {  
                context.runcode();  
            };  
            this.$("save").onclick=function(){  
                context.savecode();  
            }  
            this.$("print").onclick=function(){  
                context.printcode();  
            }  
        }  
    }  
var coder = new Coder("code");  
window.onload = function() {coder.init();};
</script>

2、在body区域引入下面的代码：

<h3>请输入代码：</h3>  
<div id="container">  
    <p>
<textarea id="code">
请把代码放到这里运行-网站模板
</textarea>
    </p>
    <button type="button" id="run">运行</button>  
    <button type="button" id="save">保存</button>  
    <button type="button" id="print">打印</button>  
</div>

注意：上面代码的“textarea”标签之间的内容最好顶格写。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！