您的位置:首页 > 建站知识 > JS > JS实现网页中运行代码|复制代码的功能
JS实现网页中运行代码|复制代码的功能
2023-03-26来源:建站素材网 别来无恙 274  ]

一些以展示html特效的网站经常会在具体页面加一个运行代码这样的一个效果,即特效代码在textarea文本框内,下面有一个运行代码按钮,点击运行按钮,就直接运行了textarea内的代码。下面和大家分享一个这样的案例,其实这个挺简单的。Javascript代码<script language="javascript">var obj=document.getElementById('codeContent');functio

一些以展示html特效的网站经常会在具体页面加一个运行代码这样的一个效果,即特效代码在textarea文本框内,下面有一个运行代码按钮,点击运行按钮,就直接运行了textarea内的代码。下面和大家分享一个这样的案例,其实这个挺简单的。


Javascript代码

<script language="javascript">
var obj=document.getElementById('codeContent');
function runCode(){
    var code=obj.value;
    var newWindow=window.open('','','');
    newWindow.opener=null;
    newWindow.document.write(code);
    newWindow.document.close();
}
function saveCode(){
    var code=obj.value;
    var winname=window.open('','_blank','top=10000');
    winname.document.open('text/html','replace');
    winname.document.writeln(code);
    winname.document.execCommand('saveas','','phpernote.html');
    winname.close();
}
function copyCode(){
    if(isIE()){
        alert('代码已复制到剪贴板!');
    }else{
        alert('本页面复制功能仅支持IE浏览器!');
        return false;
    }
    var rng=document.body.createTextRange();
    rng.moveToElementText(obj);
    rng.scrollIntoView();
    rng.select();
    rng.execCommand("Copy");
    rng.collapse(false);
}
function isIE(){
    var Sys={};
    var ua=navigator.userAgent.toLowerCase();
    var s;
    (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:false;
    return Sys.ie;
}
</script>


HTML代码

<textarea id="codeContent" rows="9" cols="50">
在这里输入要运行的代码
</textarea>
<input type="button" onclick="runCode()" value="运行代码" />
<input type="button" onclick="copyCode()" value="复制代码" />
<input type="button" onclick="saveCode()" value="代码另存为" />


评论列表
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 2023-03-26
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    路人甲 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复
    网页秒变灰色方法
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?加油陌生人,加油我的小伙伴!
    薪火千叶 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员回复这里是管理员
    网页秒变灰色方法
  • 网页秒变灰色方法
    尽管我也知道有时候确实很难好好去活着,但人生的低谷总会过去的,只是当下难过而已,我们总有笑着的那一天不是么?
    别来无恙 2023-03-26
    回复:这里是管理员回复这里是管理员回复这里是管理员回复这里是管
    网页秒变灰色方法
发表评论