脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS可直接显示网页代码运行效果的HTML代码预览功能

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

 更新时间：2015年08月06日 14:46:49   作者：皮蛋  
这篇文章主要介绍了JS实现可直接显示网页代码运行效果的HTML代码预览功能,通过获取文本框内容并在新窗口打印输出来实现直接运行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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • js右下角弹出提示框示例代码

    js右下角弹出提示框示例代码

    这篇文章主要介绍了js右下角弹出提示框示例代码，即网页右下角弹出广告信息框实例代码，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • webpack该如何打包(打包流程)

    webpack该如何打包(打包流程)

    这篇文章主要介绍了webpack该如何打包及打包流程,本文通过图文示例相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • 从parcel.js打包出错到选择nvm的全部过程

    从parcel.js打包出错到选择nvm的全部过程

    这篇文章主要介绍了从parcel.js打包出错到选择nvm的全部过程，需要的朋友可以参考下
    2018-01-01
  • javascript中mouseenter与mouseover的异同

    javascript中mouseenter与mouseover的异同

    javascript中mouseover和mouseenter的区别主要在于监听对象的子元素是否触发事件。mouseover：鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。mouseenter：鼠标移入监听对象时触发，在监听对象内移动不会触发。
    2017-06-06
  • 今天分享几个少见却很有用的 JS 技巧

    今天分享几个少见却很有用的 JS 技巧

    这篇文章主要介绍了今天分享几个少见却很有用的 JS 技巧,非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-10-10
  • js如何清空input file的值

    js如何清空input file的值

    这篇文章主要介绍了js如何清空input file的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    这篇文章主要介绍了原生js实现贪食蛇小游戏的思路详解,，文中给大家写出了注释，帮助大家理解代码，需要的朋友可以参考下
    2019-11-11
  • js中toString方法3个作用

    js中toString方法3个作用

    这篇文章主要给大家分享了js中toString方法的3个作用，文章围绕js中toString方法的相关资料展开全文内容，需要的小伙伴可以参考一下，希望对你的学习有所帮助
    2021-12-12
  • JavaScript图片url地址转base64简单示例

    JavaScript图片url地址转base64简单示例

    这篇文章主要给大家介绍了关于JavaScript图片url地址转base64的相关资料,图片URL转Base64是把图片URL转化为一个以base64编码的字符串格式,使得图片可以直接在HTML或CSS中使用,需要的朋友可以参考下
    2023-10-10
  • 浅谈JavaScript作用域和闭包

    浅谈JavaScript作用域和闭包

    本篇文章主要介绍了JavaScript作用域和闭包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论