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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
浅析JS运动
Dec 28 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
vue.js的安装方法
May 12 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
vue data引入本地图片的两种方式小结
Nov 13 Javascript
JS面向对象之多选框实现
Jan 17 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
Python使用剪切板的方法
2017/06/06 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
python 表格打印代码实例解析
2019/10/12 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python怎么对数字进行过滤
2020/07/05 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
法人代表证明书格式
2014/10/01 职场文书
迟到检讨书
2015/01/26 职场文书
专家推荐信范文
2015/03/26 职场文书
2015年国培研修感言
2015/08/01 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL