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

web前端|js教程 JS实现可直接显示网页代码运行效果的HTML代码预览功能实例【javascript】

JS,显示网页代码,运行效果,HTML,代码预览

web前端-js教程

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

微信微课堂源码,Ubuntu下关闭dns,tomcat下的文件不见,中国爬虫社,php最初用途,阿克苏seo 网络推广不二之选lzw

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

第三方平台源码,vscode设置html,ubuntu中make没有对象,tomcat中优化,sqlite数据不让删除,jquery word转pdf插件,阿里的前端框架js,爬虫工具app下载,win php 环境搭建,临沂关键词seo排名,多平台小说网站系统,网页代码查询软件,考试系统网站模板下载,免费404页面下载,java通讯录管理系统源代码,手机版舞曲程序源码lzw

运行效果下图例：

免费的人才程序源码,ubuntu切换运行级别,爬虫简介ppt下载,php 按时执行,.seo的定义lzw

具体代码如下：

直接页面显示器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;} 直接页面显示器
    请在下面窗口中输入HTML代码  
   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("帮助信息") OpenWindow.document.write("你只要把你想显示的代码放到上页的输入框中，你自己也可以写代码，按显示键就能显示你的页面内容
") OpenWindow.document.write("关闭本窗口") OpenWindow.document.close() self.name="main"}    
          
       将下面代码复制到输入框试试
你好
      你好，欢迎光临脚本之家网页特效栏目！

代码预览显示网页代码运行效果