很实用的运行调试代码

kos — Mon, 19 Oct 2009 09:36:51 +0000

　　最近没事干，喜欢搞一点小东西，有一个东西我觉得很有意思，可以给大家分享一下，只不过用起来还是有那么点不方便，不过方法我觉得挺有意思。
　　在很多网页中都会看到有代码调试效果这样的功能，通常一个页面可能会有多个这样的功能，牵涉到传值的问题有点麻烦，按照传统的方法，给一个id什么的来解决，但是多了的话可能自己都记不清楚到底对应的id是多少了，还有就是怕重复，一个页面里面id是不能重复的。
代码如下：



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> <!-- body{ margin:10px; padding:0px; font-size:12px;} div,ul,li,textarea,input{ line-height:22px; font-size:12px;} .textarea{ list-style-type:none; width:100%; border:0px; height:150px; margin-right:4px;_margin-right:8px;} .Nodiv{width:600px; border:1px #cccccc solid; border-left:6px #cccccc solid;} .Notitle{background:#EFEFEF; padding-left:4px; border-bottom:1px #CCCCCC solid; clear:both; font-size:14px; font-weight:bold;} .Nocontent{clear:both; padding:4px;} .Nobutton{ padding-left:4px;} .Nobutton input{background:#CCCCCC; height:20px; line-height:18px; border:1px #999999 solid; border-left:4px #999999 solid;} --> </style> <script type="text/javascript" language="javascript">  function RunCode(obj){ 	var nodiv = obj.parentNode.parentNode.parentNode.getElementsByTagName("textarea")[0]; 	var code = nodiv.value; 	if (code!=""){ 		var newwin=window.open('','','');   		newwin.opener = null;  		newwin.document.write(code);   		newwin.document.close(); 		} }  function CopyCode(obj){ 	var nodiv = obj.parentNode.parentNode.parentNode.getElementsByTagName("textarea")[0]; 	if (document.all){ 		 textRange = nodiv.createTextRange();  		 textRange.execCommand("Copy");  		 alert("代码已经复制到剪切板"); 	} 	else{ 		 alert("此功能只能在IE上有效\n\n请在文本域中用Ctrl+A选择再复制") 	} }  function SaveCode(obj) { 	var nodiv = obj.parentNode.parentNode.parentNode.getElementsByTagName("textarea")[0]; 	var winname = window.open('','','width=0,height=0,top=1,left=1'); 	winname.document.open('text/html', 'replace'); 	winname.document.write(nodiv.value); 	winname.document.execCommand('saveas','','Code.htm'); 	winname.close(); }  </script> </head>  <body><!--1、把每一个code调试功能的代码放到一个form里面，主要是方便修改查找 //2、调用的时候传值直接传this,通过节点关系找到他们所在的form,然后找到对应的textarea //3、里面查找textarea的时候需要遍历一次，getElementsByTagName找到第一个textarea，有可能在这个form下会有多个textarea标签，比如调试代码里面有textarea --> <form> <div class="Nodiv"> <div class="Notitle">CODE</div> <div class="Nocontent"><textarea cols="" rows="8" class="textarea"><textarea>121212</textarea>
     
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
     




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

散人笔记 » code调试

很实用的运行调试代码