在线运行代码

最新推荐文章于 2024-07-16 16:54:16 发布

静宝宝的博客

最新推荐文章于 2024-07-16 16:54:16 发布

阅读量2.1k

点赞数

分类专栏： JavaScript小应用文章标签：在线运行代码

本文链接：https://blog.csdn.net/JJ19941003/article/details/54707477

版权

JavaScript小应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如下图，点击按钮执行代码之后会生成右边页面
在线运行代码

接下来我做一个简单的布局

<style type="text/css">
            textarea{
                width: 500px;
                height: 500px;
            }
</style>
<body>
        <textarea name="" rows="" cols="" id="text">

        </textarea>
        <input type="button" name="" id="btn" value="在线运行代码" />
</body>
<script>
    window.onload=function(){
        var oText=document.getElementByID('text');
        var oBtn=document.getElementByID('btn');
        oBtn.onclick=function(){
            var new=window.open('about:blank');//返回值是一个新的空白document；
            new.document.write(oText.value);//将文本域里面的代码添加到空白的document上，这样通过浏览器打开的新的页面就是new里面的代码生成的；
        }
    }
</script>