最近没事干，喜欢搞一点小东西，有一个东西我觉得很有意思，可以给大家分享一下，只不过用起来还是有那么点不方便，不过方法我觉得挺有意思。 在很多网页中都会看到有代码调试效果这样的功能，通常一个页面可能会有多个这样的功能，牵涉到传值的问题有点麻烦，按照传统的方法，给一个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></textarea></div> <div class="Nobutton"> <input type="button" value="运行代码" onClick="RunCode(this)"> <input type="button" value="复制代码" onClick="CopyCode(this)"> <input type="button" value="保存代码" onClick="SaveCode(this)"> </div> <div style=" clear:both; padding-left:4px;">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div> </div> </form> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
DYGhfo Excellent article, I will take note. Many thanks for the story!
看不懂。。。。。。。。。。。。。。 做了有什么效果？
哈哈，没事，你不是学这个的，其实很简单，会耍就行了，点运行代码那个按钮就看得到效果了，你可以把里面的值改成任意的东西，都能以网页形式给你打开，就这个效果！
DYGhfo Excellent article, I will take note. Many thanks for the story!
看不懂。。。。。。。。。。。。。。
做了有什么效果？
哈哈，没事，你不是学这个的，其实很简单，会耍就行了，点运行代码那个按钮就看得到效果了，你可以把里面的值改成任意的东西，都能以网页形式给你打开，就这个效果！