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

2019-11-20 11:53:56

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS实现从网页顶部掉下弹出层效果的方法

下一篇：PHP+jQuery+Ajax+Mysql如何实现发表心情功能