Textarea 実行ボックス効果コードは、batches_javascript スキルで ID を指定せずに JavaScript によって実装されました

DOM ノードツリーの操作方法と属性をいくつか覚えたので、ID とダブルクリックイベントを手動で設定せずにサンプルを書いてみました。 : (説明: ダブルクリックしてテキストを実行します。ボックス内のコードを右クリックしてコードをコピーし、テストするために *.htm ファイルとして保存します)

<title>テキストエリアのランニングボックス効果</title> <style>textarea {width:100%;height:200px;font-family:"fixedsys";overflow-y:hidden;} </style> <textarea> <!--代码实例--> <!--代码实例--> <textarea> <!--代码实例--> <div id="testdiv"> </div> <!--代码实例--> <textarea> <!--代码实例--> <div id="testdiv"> </div> <!--代码实例-->

<script> /************************************************************************************************************************************ *copyright (C) ymk18@163.com QQ:334150781 URL http://hi.baidu.com/ymk18 欢迎交流 共同学习 共同探讨 共同进步 2009-05-04 PM 19:17 *************************************************************************************************************************************/ window.onload = function() { //把此函数绑定到onload事件上 var textarea = document.getElementsByTagName("textarea"); //把所有textarea元素存入数组变量textarea for (var i=0;i<textarea.length;i++) { //遍历该数组变量textarea textarea[i].setAttribute("id",i); //设置每个textarea元素的id属性 textarea[i].style.posHeight = textarea[i].scrollHeight; //重置高度值使textarea元素高度自适应，重要样式height:200px; textarea[i].ondblclick = function() { //自定义鼠标双击事件 runCode(this.id); //调用运行代码函数 } textarea[i].oncontextmenu = function() { //自定义鼠标右击事件 this.select(); //右击对象中的文本选中效果 copyCode(this.id); //调用复制代码函数 return false; //拦截浏览器默认行为 } } } //运行代码 function runCode(getId) { var code=document.getElementById(getId).firstChild.nodeValue; if (code!=""){ var newwin=window.open('','',''); newwin.opener = null newwin.document.write(code); newwin.document.close(); } } //复制代码 function copyCode(getId) { var text=document.getElementById(getId).firstChild.nodeValue; window.clipboardData.setData("Text",text); alert("内容已经复制到剪切板！"); } //保存代码 function saveCode(getId) { var code=document.getElementById(getId).firstChild.nodeValue; var winname = window.open('', '_blank', 'top=10000'); winname.document.open('text/html', 'replace'); winname.document.writeln(code); winname.document.execCommand('saveas','','code.htm'); winname.close(); } </script>[Ctrl A すべて選択 注: <script> var para = document.createElement("p"); //创建一个p元素节点并赋值给para变量 alert(para.nodeName); //显示元素节点的名字 alert(para.nodeType); //nodeType的值若为1->元素节点；2->属性节点；3->文本节点 </script>外部 Js を導入する必要がある場合は、<script> window.onload = function() { var para = document.createElement("p"); var txt1 = document.createTextNode("I inserted "); para.appendChild(txt1); var emphasis = document.createElement("em"); var txt2 = document.createTextNode("this"); emphasis.appendChild(txt2); para.appendChild(emphasis); var txt3 = document.createTextNode(" content."); para.appendChild(txt3); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); } </script> を実行するために更新する必要があります]<script> window.onload = function() { var para = document.createElement("p"); var txt1 = document.createTextNode("I inserted "); var emphasis = document.createElement("em"); var txt2 = document.createTextNode("this"); var txt3 = document.createTextNode(" content."); para.appendChild(txt1); emphasis.appendChild(txt2); para.appendChild(emphasis); para.appendChild(txt3); var testdiv = document.getElementById("testdiv"); testdiv.appendChild(para); } </script>