CSS手册CSS3手册Edu网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > CSS特效 >

运行代码 html在线运行代码特效“运行代码”的文本域代码

运行代码”的文本域代码,html网页中插入的可点击“在线运行代码”中“运行代码”按钮来运行输入HTML代码特效。在网页中可直接输入HTML代码、CSS代码、js代码后点击运行代码按钮后在浏览器新窗口浏览测试输入代码。在程序开发、JS开发、CSS开发、网页制作类问题网、学习网中使用非常实用。网页特效网站所需要的“运行代码”功能的文本框,将代码复制到此文本框中即可实现代码的运行,查看代码效果非常方便,有一些文本编辑器,已将此功能内置到其中,希望大家喜欢。


html在线运行代码截图

在线运行代码特效的关键源代码:

  1. <script language="JavaScript" type="text/JavaScript"> 
  2. //运行文本域textarea代码 
  3. function runEx(cod1) { 
  4. cod=document.all(cod1) 
  5. var codcode=cod.value; 
  6. if (code!=""){ 
  7. var newwin=window.open('','',''); //打开一个窗口并赋给变量newwin。 
  8. newwin.opener = null // 防止代码对论谈页面修改 
  9. newwin.document.write(code); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。 
  10. newwin.document.close(); 
  11. </script> 
  12. <textarea name="textarea" cols="48" rows="12" id="rn01"> 
  13. 加入要运行的代码,如果CSS代码别忘记使用style标签 
  14. </textarea> 
  15. <br><INPUT onClick="runEx('rn01')" type="button" value="运行代码" style="cursor:hand"> 

在线运行代码运行后在浏览器效果截图:


在线运行代码在浏览器中测试截图

在线运行代码的输入框输入的HTML+CSS代码

  1. <style> 
  2. .thinkcss{ width:400px; color:#F00; height:100px;border:1px solid #000} 
  3. </style> 
  4. <div class="thinkcss">ThinkCSS测试内容</div> 

运行代码在线测试:

查看案例

html在线运行代码特效打包下载:

此运行代码可插入任何HTML网页中使用。注意是在运行CSS代码和HTML代码时候,在运行代码中输入框内输入的代码别忘记把CSS代码放入style标签,不然CSS是无效的;同时如果运行JS代码,如果JS和HTML放一起别忘记JS代码放入script标签内以免JS代码无效。

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/css-texiao/texiao880.shtml

CSS基础教程 CSS Based Tutorial

HTML基础教程 HTML Based Tutorial

CSS教程文章修订日期:2016-05-28 09:33 www.thinkcss.com ThinkCSS。