当前页:网页制作 >>>网页制作-复制代码、保存代码、运行代码
网页制作-复制代码、保存代码、运行代码
来源:本站原创   责任编辑:黄舒奇   最后修改时间2016-05-28
   上一篇文章说的是天气预报代码,里面有代码,没有复制,可能有人就会问,怎么没有复制代码按钮啊?下面我们就来做一个复制代码、保存代码、运行代码这个实例。
效果演示:注:转换到IE下浏览
提示:此程序仅在IE下运行。
源代码如下:

<table width="480" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><script>
//运行代码
function runCode(obj) {
var winname = window.open('', "_blank", '');
winname.document.open('text/html', 'replace');
winname.opener = null // 防止代码对页面修改
winname.document.write(obj.value);
winname.document.close();
}
//复制代码
function copycode(obj) {
if (document.all && obj.style.display != 'none'){
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
alert("代码已经复制到剪切板");
}else{
alert("此功能只能在IE上有效\n\n请在文本域中用Ctrl+A选择再复制")
}
}
//另存代码
function saveCode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text/html', 'replace');
winname.document.write(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
</script>
<div class="smalltxt" style="margin-top: 1em; margin-bottom: 1em"><span class="smalltxt" style="margin-top: 1em; margin-bottom: 1em"><span class="smalltxt" style="margin-top: 1em; margin-bottom: 1em"><span class="smalltxt" style="margin-top: 1em; margin-bottom: 1em"><span class="smalltxt" style="margin-top: 1em; margin-bottom: 1em">
<textarea name="runcode0" rows="12" cols="65"><marquee scrollamount="4" width="800">欢迎光临初学flash,希望对你有所帮助! 转载请注明出处,地址:__http://www.hsq80.com______2008年5月28日</marquee>

</textarea>
</span></span></span></span><span class="smalltxt" style="margin-top: 1em; margin-bottom: 1em">
<input name="button" type="button" onclick="runCode(runcode0)" value="运行代码" />
</span>
<input name="button" type="button" onclick="copycode(runcode0)" value="复制代码" />
<input name="button" type="button" onclick="saveCode(runcode0)" value="另存代码" />
提示:您可以先修改部分代码再运行</div></td>
</tr>
</table>