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 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 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 危险函数全解析
2009/09/09 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
解析link_mysql的php版
2013/06/30 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
vue.js实现备忘录demo
2019/06/26 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
盛大笔试题
2016/11/05 面试题
华为python面试题
2016/05/03 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
2014中考励志标语
2014/06/05 职场文书
国庆节活动总结
2014/08/26 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
父亲节活动总结
2015/02/12 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS