仿制代码运行框
效果展示:
程序代码:
代码
<!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>
<title>代码运行框</title>
<style type="text/css">
.runcode
{
font-family: "Courier New" , Courier, monospace;
}
#idRuncode
{
border-bottom: #494d74 1px solid;
border-left: #b1b4cd 1px solid;
background: #696d81;
color: #ffffff;
border-top: #b1b4cd 1px solid;
border-right: #494d74 1px solid;
}
#idCopycode
{
border-bottom: #494d74 1px solid;
border-left: #b1b4cd 1px solid;
background: #696d81;
color: #ffffff;
border-top: #b1b4cd 1px solid;
border-right: #494d74 1px solid;
}
#idSavecode
{
border-bottom: #494d74 1px solid;
border-left: #b1b4cd 1px solid;
background: #696d81;
color: #ffffff;
border-top: #b1b4cd 1px solid;
border-right: #494d74 1px solid;
}
</style>
<script type="text/javascript">
function runCode(obj) {
if (obj.value != "") {
var newWin = window.open("");
newWin.document.write(obj.value);
newWin.document.close();
}
}
function copyCode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}
function saveCode(obj) {
var winname = window.open("", "", "top=10000");
winname.document.open('text/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas', '', '');
winname.close();
}
</script>
</head>
<body>
<textarea id="idTextarea" name="runcode" rows="12" cols="95"></textarea>
<br />
<input id="idRuncode" onclick="runCode(idTextarea)" type="button" value="运行代码" />
<input id="idCopycode" onclick="copyCode(idTextarea)" type="button" value="复制代码" />
<input id="idSavecode" onclick="saveCode(idTextarea)" type="button" value="另存代码" />
</body>
</html>
