HTML完成如下网页效果代码,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>

你好

你好，欢迎光临网页特效栏目！

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

HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...相关推荐

js直接显示html,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例.pdf...
JS实实现现可可直直接接显显示示网网页页代代码码运运行行效效果果的的HTML代代码码预预览览功功能能实实例例本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大供大参 ...
原生js实现ajax的文件异步提交功能、图片预览功能.实例
采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...
网页中JS实现（调用）打印预览功能
近期的项目中需要在页面中实现打印预览功能--点击网页中的"打印"(Print),弹出打印预览窗口,点击窗口页面中的"开始打印"(Print),则出现浏览器的打印 ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
js+java 实现图片在线预览功能
本博客主要描述如何用JavaScript+java实现图片的预览功能,其实要点还是需要服务端的流. (一)功能描述点击页面的 [预览] 查看已经上传的或者在服务器中存在的图片. (二)实现原理使用 ...
文档文件等网页端预览功能
要实现word.ppt.excel.pdf等文档在web应用端预览功能,目前一般做法为: 在页面的显示效果: 主要用的工具: Openoffice4(windows.linux):SWFTools ...
php主页显示商品预览图代码,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能...
这次给大家带来jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能,jQuery实现鼠标滑过商品小图片上显示对应大图商品页预览功能的注意事项有哪些,下面就是实战案例,一起来看一下. 1 . ...
js图片上传预览功能
最近项目中用到的图片上传前预览功能,兼容IE6-9,FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
html页面实现打印预览功能,js实现打印、页面设置、打印预览功能
javascript打印-打印页面设置-打印预览代码 function printsetup(){ // 打印页面设置 wb.execwb(8,1); } function printpreview( ...

HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...

HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...相关推荐

最新文章

热门文章