首页 > 程序开发 > web前端 > JavaScript > 正文
在网页上Run Code (测试代码) 功能
2012-02-11       个评论      
收藏    我要投稿

平时在很多论坛或者博客中,都可以看到作者或者评论者的文章中,都会摆出一段代码,并且能实现在线测试.

实现此功能的代码如下:


[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')"> 
<span style="white-space:pre">    </span></div> 
</body> 
</html> 
<!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="/">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')">
<span style="white-space:pre"> </span></div>
</body>
</html>
Demo


摘自 简生的代码备忘录
点击复制链接 与好友分享!回本站首页
相关TAG标签 代码 功能 网页
上一篇:JavaScript 中函数定义的差异问题
下一篇:JavaScript的词法作用域
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站