在网页上Run Code (测试代码) 功能
平时在很多论坛或者博客中,都可以看到作者或者评论者的文章中,都会摆出一段代码,并且能实现在线测试.
实现此功能的代码如下:
[javascript]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="MapleJan" />
<title>Run Code</title>
<meta name="description" content="在网页上测试文本框中的代码.">
<script>
function runCode(textId) {
var code = document.getElementById(textId).value;
var newWindow = window.open();
newWindow.opener = null; //对创建该窗口(newWindow)的Window不进行任何操作.
newWindow.document.write(code);
newWindow.document.close(); //关闭open()方法打开的文文档流.
};
function copyCode(textId) {
if(window.clipboardData) { //判断浏览器,目前仅支持IE
var otext = document.getElementById(textId).value;
window.clipboardData.setData('text',otext);
alert('复制成功!');
} else {
alert("你的浏览器不支持此功能,请手动选取文本进行复制!");
}
};
</script>
<style>
#text-code {
font-size: 12px;
height: 300px;
width: 500px;
resize: none;
}
</style>
</head>
<body>
<span style="white-space:pre"> </span><div>
<span style="white-space:pre"> </span><textarea id="text-code"><b>Hi,This is my <a href="http://maplejan.com/">website</a>!</b></textarea>
<span style="white-space:pre"> </span><br />
<span style="white-space:pre"> </span><input onclick="runCode('text-code')" type="button" value="运行代码">
<span style="white-space:pre"> </span><input type="button" value="复制代码" onclick="copyCode('text-code')">
相关新闻>>
- 发表评论
-
- 最新评论 更多>>
