当前位置: 首页 > 编程笔记 >

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

袁英豪
2023-03-14
本文向大家介绍JS实现可直接显示网页代码运行效果的HTML代码预览功能实例,包括了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=显示>&nbsp;&nbsp; <INPUT onclick=trestart() type=button value=清除>&nbsp;&nbsp; <INPUT onclick=about() type=button value=关于>&nbsp;&nbsp; <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>&lt;html&gt;<BR>&lt;head&gt;<BR>&lt;title&gt;你好&lt;/title&gt;<BR>&lt;/head&gt;<BR><BR>&lt;body&gt;<BR>
      你好,欢迎光临小牛知识库网页特效栏目!<BR>
   &lt;/body&gt;<BR><BR>&lt;/html&gt;</FONT></SPAN></P></TD></TR></TBODY></TABLE></CENTER></DIV>
</BODY>
</HTML>

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

 类似资料:
  • 本文向大家介绍20行JS代码实现网页刮刮乐效果,包括了20行JS代码实现网页刮刮乐效果的使用技巧和注意事项,需要的朋友参考一下 分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码 效果如下 盖伦.jpg 刮刮乐.gif HTML部分 没什么要特别注意的 为了效果加了些CSS样式 CSS部分 注意 1.为了清除浏览器自带效果加了 2.img需要在灰布下面,加了z-index

  • 本文向大家介绍JS基于Ajax实现的网页Loading效果代码,包括了JS基于Ajax实现的网页Loading效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考,具体如下: 这是一款很不错的网页Loading效果,常用于Ajax交互式网页设计中,点击按钮即可弹出Loading框,若Loading框未加载完成时关闭网

  • 本文向大家介绍JSP实现的简单分页显示效果代码,包括了JSP实现的简单分页显示效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JSP实现的简单分页显示效果代码。分享给大家供大家参考,具体如下: 希望本文所述对大家JSP程序设计有所帮助。

  • 本文向大家介绍JS代码实现table数据分页效果,包括了JS代码实现table数据分页效果的使用技巧和注意事项,需要的朋友参考一下 第一个:实现的很常见很简单的显示页数翻页      效果图: •这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神) •下面就是JS代码了 第二个:实现前进页和后退页       效果图: •这是全部代码,用得原生JS,依然还是很简单滴(好像对原生js有种莫名的喜

  • 本文向大家介绍layui分页效果实现代码,包括了layui分页效果实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下 效果图: 官网分页 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Angularjs 实现分页功能及示例代码,包括了Angularjs 实现分页功能及示例代码的使用技巧和注意事项,需要的朋友参考一下 基于Angularjs实现分页 前言        学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接