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


Posted in Javascript onAugust 06, 2015

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

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

运行效果如下图所示:

JS实现可直接显示网页代码运行效果的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程序设计有所帮助。

Javascript 相关文章推荐
jquery插件之easing使用
Aug 19 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
Apr 01 Javascript
jQuery异步提交表单实例
May 30 jQuery
ES6正则表达式扩展笔记
Jul 25 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 #Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 #Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 #Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 #Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
谈谈VUE种methods watch和compute的区别和联系
2017/08/01 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
vue实现简单瀑布流布局
2020/05/28 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python实现身份证号码解析
2015/09/01 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
Python中if有多个条件处理方法
2020/02/26 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
中职生求职信
2014/07/01 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL