JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能。分享给大家供大家参考。具体如下：

JavaScript实现HTML代码预览功能，直接在网页上显示代码运行的效果，就例如点击“运行代码”后的效果，使用时，你只需将需要运行的HTML代码拷贝到文本框内，点击对应的功能按钮即可。

运行效果如下图所示：

具体代码如下：

<HTML>
<HEAD>
<TITLE>直接页面显示器</TITLE>
<STYLE type="text/css">
BODY{MARGIN-TOP: 0px;FONT-SIZE: 9pt;MARGIN-LEFT: 4px;MARGIN-RIGHT: 0px;FONT-FAMILY: "微软雅黑"}
A{FONT-WEIGHT: 400;FONT-SIZE: 13px;COLOR: black;TEXT-DECORATION: none}
A: hover{FONT-WEIGHT: 400;FONT-SIZE: 13px;COLOR: red;TEXT-DECORATION: underline}
A: active{CURSOR: hand;COLOR: #ff0033}
.STYLE1{color: #0000FF;font-size: 40px;}
.STYLE2{font-weight: bold;font-size: 30px;}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY>
<CENTER>
 <span class="STYLE1"><FONT face=隶书>直接页面显示器</FONT></span>
</CENTER><BR>
<CENTER>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0
cellPadding=0 border=0 borderlight="green">
 <TBODY>
 <TR>
  <TD align=middle><span class="STYLE2"><FONT color=red>请在下面窗口中输入HTML代码</FONT></span></TD>
 </TR>
 <TR>
  <TD align=middle>
<SCRIPT language=JavaScript>
function trestart(){
  if (script) {
  clear = confirm("确定要清除吗？",'');
  if(clear) {
  document.script.reset();
  document.script.value = "";
 }
 }
}
function test(){
 {
 temp = document.script.tester.value;
 testwin= open("", "testwin","status=no,menubar=yes,toolbar=no");
 testwin.document.open();
 testwin.document.write(temp);
 testwin.document.close();
 }
}
function about(){
 alert("HTML代码直接显示出页面来")
}
function help(){
 OpenWindow=window.open("", "newwin","height=220,width=470,toolbar=no,scrollbars="+scroll+",menubar=no");
 OpenWindow.document.write("<body bgcolor='white' text='black' alink='blue'vlink='blue' link='blue'><TITLE>帮助信息</TITLE>")
 OpenWindow.document.write("<center>你只要把你想显示的代码放到上页的输入框中，你自己也可以写代码，按显示键就能显示你的页面内容</center><br>")
 OpenWindow.document.write("<center><a href='javascript:close()'>关闭本窗口</a></Center>")
 OpenWindow.document.close()
 self.name="main"
}
</SCRIPT>
   <FORM name=script><TEXTAREA name=tester rows=8 wrap=off cols=50></TEXTAREA> <BR><INPUT onclick=test() type=button value=显示>   <INPUT onclick=trestart() type=button value=清除>   <INPUT onclick=about() type=button value=关于>   <INPUT onclick=help() type=button value=帮助>
</FORM></TD></TR></TBODY></TABLE></CENTER>
<CENTER>
<DIV align=center>
<CENTER>
<TABLE id=AutoNumber1 style="BORDER-COLLAPSE: collapse" borderColor=#111111
cellSpacing=0 cellPadding=0 width=360 border=0>
 <TBODY>
 <TR>
  <TD>
   <P align=left><SPAN style="FONT-SIZE: 9pt">将下面代码复制到输入框试试<BR><FONT
   color=#ff0033><BR><html><BR><head><BR><title>你好</title><BR></head><BR><BR><body><BR>
      你好，欢迎光临我们网页特效栏目！<BR>
   </body><BR><BR></html></FONT></SPAN></P></TD></TR></TBODY></TABLE></CENTER></DIV>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js实现网页倒计时、网站已运行时间功能的代码3例

    1.jQuery.countdown插件 显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义.目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/例如: 复制代码 代码如下: <div id="getting-started"></div><script src="

  • JS实现直接运行html代码的方法

    JS实现直接运行html代码的方法

    本文实例讲述了JS实现直接运行html代码的方法.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>直接运行 html 代码</title> </head> <body> <textarea style='width:300px;height:200px;' id='txtCode'&

  • 不使用浏览器运行javascript代码的方法

    有时候我们想用js写一段小程序,但是又觉得使用浏览器去运行挺麻烦的,那么现在我们来看一下如何使用java程序调用javascript程序,这样就可以不借助浏览器就可执行js代码了. 之所以有这个需求是因为这几天在做的一个项目中碰到了这样的问题,我有一个javascript脚本,但是这个项目的其他代码都是用C\C++写的,不想将js代码转成C,感觉太麻烦了,所以就想如果可以在C下面直接调用javascript代码就好了,或者在shell中有一个可以不借助浏览器就可以直接运行js代码的工具也行.现在

  • javascript 代码运行器

    var userAgent = navigator.userAgent.toLowerCase(); var is_opera = userAgent.indexOf('opera') != -1 && opera.version(); var is_saf = userAgent.indexOf('applewebkit') != -1 || navigator.vendor == 'Apple Computer, Inc.'; var is_webtv = userAgent.inde

  • js网页中的(运行代码)功能实现思路

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset='utf8' /> <title>网页中的运行代码功能</title> <script type="text/javascript"> function runCode(oCode) { var win = window.open('', "_blank", ''); win

  • 打开windows运行对话框的js

    有些时候我们的run.js并不是执行的,可以保存后缀名为.jse也可以运行 (new ActiveXObject("shell.application")).filerun() [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • javascript实现的textarea运行框效果代码 不用指定id批量指定

    刚学了点DOM节点树的操作方法和属性,边尝试着写一个不用手动设置id和双击事件的例子,折腾了N久终于弄出了摸样来了,代码如下:(说明:双击运行文本框里的代码,右击复制其内的代码,另存为*.htm文件即可测试) textarea运行框效果 textarea {width:100%;height:200px;font-family:"fixedsys";overflow-y:hidden;} /************************************************

  • 禁止JS运行的代码

    by 我们 - 给我一双翅膀,我也将展翅高飞! alert("ok"); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS、HTML代码运行工具

    JS.HTML代码运行工具 function runCode(obj) { if(obj.value==""){ alert("请输入要运行的代码内容"); return false;} var winname = window.open('', "_blank", ''); winname.document.open('text/html', 'replace'); winname.document.writeln(obj.value); wi

  • 可以测试javascript运行效果的代码

    可以再代码框中编写简单的JavaScript function btn_onclick() { try { var cmdWin =document.getElementById("txtre");//获取文本id var str="try{"+cmdWin.value+"} catch(e){alert('你的代码有错:'+e.description);}";//构造函数体,这里的e.description用来输出你输入的JavaScript代

  • javascript实现在网页中运行本地程序的方法

    本文实例讲述了javascript实现在网页中运行本地程序的方法.分享给大家供大家参考,具体如下: <input onclick="exec('notepad.exe')" value="执行noteppad.exe" type="button"> <input onclick="exec('cmd.exe')" value="执行cmd.exe" type="button&qu

随机推荐