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

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

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

运行效果如下图所示：

具体代码如下：

直接页面显示器

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;}

直接页面显示器

cellPadding=0 border=0 borderlight="green">

请在下面窗口中输入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"

}

cellSpacing=0 cellPadding=0 width=360 border=0>

将下面代码复制到输入框试试

color=#ff0033>
<html>
<head>
<title>你好</title>
</head>
<body>

你好，欢迎光临脚本之家网页特效栏目！

</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_39888412/article/details/112924938
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-12 21:20:44
阅读 ( 908 )
分类：前端

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看