집 > 기사 > 웹 프론트엔드 > JS는 웹 페이지 code_javascript 기술의 실행 효과를 직접 표시할 수 있는 HTML 코드 미리보기 기능의 예를 구현합니다.

JS는 웹 페이지 code_javascript 기술의 실행 효과를 직접 표시할 수 있는 HTML 코드 미리보기 기능의 예를 구현합니다.

WBOY원래의: 2016-05-16 15:46:341781검색

이 글의 예시에서는 웹페이지 코드의 실행 효과를 직접 표시할 수 있는 HTML 코드 미리보기 기능의 JS 구현을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

JavaScript에는 "코드 실행"을 클릭한 후의 효과 등 웹 페이지에서 실행되는 코드의 효과를 직접 표시하는 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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：웹 페이지 상단에서 팝업 레이어가 떨어지는 효과를 구현하는 JS 방법_javascript 기술다음 기사：웹 페이지 상단에서 팝업 레이어가 떨어지는 효과를 구현하는 JS 방법_javascript 기술

JS는 웹 페이지 code_javascript 기술의 실행 효과를 직접 표시할 수 있는 HTML 코드 미리보기 기능의 예를 구현합니다.

관련 기사