代码运行框

最新推荐文章于 2023-12-06 20:32:21 发布

愤怒的火柴

最新推荐文章于 2023-12-06 20:32:21 发布

阅读量921

点赞数

分类专栏：前端文章标签： function button html border div

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
      <head>  
        <title>coder</title>  
          
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
        <meta http-equiv="description" content="this is my page">  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
        <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").οnclick=function(){  
                        context.savecode();  
                    }  
                    this.$("print").οnclick=function(){  
                        context.printcode();  
                    }  
                }  
            }  
        var coder = new Coder("code");  
        window.onload = function() {coder.init();};  
      
        </script>  
       </head>  
       <body>  
            <h3>请输入代码：</h3>  
            <div id="container">  
                <p><textarea id="code"><!DOCTYPE html>  
    <html>  
        <head>  
            <title>coder</title>  
        </head>  
        <body>  
              
        </body>  
    </html></textarea></p>  
                <button type="button" id="run">运行</button>  
                <button type="button" id="save">保存</button>  
                <button type="button" id="print">打印</button>  
            </div>  
        </body>  
    </html>