如何用HTML和CSS实现在网页内输入HTML代码后按按钮实现效果
想在网页中简单实现输入HTML代码实现效果的功能（尽量不用JS的情况下，如果非用不可的情况下也可以）做一个简单的网页设计学习练习页面。...
想在网页中简单实现输入HTML代码实现效果的功能（尽量不用JS的情况下，如果非用不可的情况下也可以）做一个简单的网页设计学习练习页面。
展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.css">
<style>
.CodeMirror {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<textarea id="textareaCode"></textarea>
<button onclick="submitTryit()">点击运行</button>
<div id="iframewrapper"></div>
</body>
<script src="http://cdn.staticfile.org/codemirror/5.40.2/codemirror.min.js"></script>
<script>
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{
matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null
},
{
matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"
}]
};
var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
mode: mixedMode,
selectionPointer: true,
lineNumbers: false,
matchBrackets: true,
indentUnit: 4,
indentWithTabs: true
});
window.addEventListener("resize", autodivheight);
function autodivheight() {
var winHeight = 0;
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if ((document.body) && (document.body.clientHeight)) {
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight) {
winHeight = document.documentElement.clientHeight;
}
height = winHeight * 0.68
editor.setSize('100%', height);
document.getElementById("iframeResult").style.height = height + "px";
}
function resetCode() {
var initCode = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\"> \n<title>\u83dc\u9e1f\u6559\u7a0b(runoob.com)<\/title> \n<style>\n#grad1 {\n height: 200px;\n\tbackground-color: red; \/* \u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u65f6\u663e\u793a *\/\n background-image: linear-gradient(#e66465, #9198e5);\n}\n<\/style>\n<\/head>\n<body>\n\n<h3>\u7ebf\u6027\u6e10\u53d8 - \u4ece\u4e0a\u5230\u4e0b<\/h3>\n<p>\u4ece\u9876\u90e8\u5f00\u59cb\u7684\u7ebf\u6027\u6e10\u53d8\u3002\u8d77\u70b9\u662f\u7ea2\u8272\uff0c\u6162\u6162\u8fc7\u6e21\u5230\u84dd\u8272\uff1a<\/p>\n\n<div id=\"grad1\"><\/div>\n\n<p><strong>\u6ce8\u610f\uff1a<\/strong> Internet Explorer 9 \u53ca\u4e4b\u524d\u7684\u7248\u672c\u4e0d\u652f\u6301\u6e10\u53d8\u3002<\/p>\n\n<\/body>\n<\/html>"
editor.getDoc().setValue(initCode);
submitTryit();
}
function submitTryit() {
var text = editor.getValue();
var patternHtml = /<html[^>]*>((.|[\n\r])*)<\/html>/im
var patternHead = /<head[^>]*>((.|[\n\r])*)<\/head>/im
var array_matches_head = patternHead.exec(text);
var patternBody = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var array_matches_body = patternBody.exec(text);
var basepath_flag = 1;
var basepath = '';
if (array_matches_head) {
text = text.replace('<head>', '<head>' + basepath);
} else if (patternHtml) {
text = text.replace('<html>', '<head>' + basepath + '</head>');
} else if (array_matches_body) {
text = text.replace('<body>', '<body>' + basepath);
} else {
text = basepath + text;
}
var iframe = document.createElement("iframe");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("id", "iframeResult");
iframe.setAttribute("width", "100%");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(iframe);
var ifrw = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
autodivheight();
}
submitTryit();
autodivheight();
</script>
</html>
请采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>代码测试</title>
<style type="text/css">
.body-box{width: 80%;margin: auto;}
#test-html{height: 500px;overflow: auto;}
#html-input{width:100%;height:300px;}
</style>
</head>
<body>
<div class="body-box">
<div id="test-html"></div>
<textarea id="html-input"></textarea>
<button id="go">运行</button>
</div>
</body>
<script type="text/javascript">
var go = document.getElementById("go");
go.onclick = function(){
var html_input = document.getElementById("html-input").value;
document.getElementById("test-html").innerHTML = html_input;
}
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>代码测试</title>
<style type="text/css">
.body-box{width: 80%;margin: auto;}
#test-html{height: 500px;overflow: auto;}
#html-input{width:100%;height:300px;}
</style>
</head>
<body>
<div class="body-box">
<div id="test-html"></div>
<textarea id="html-input"></textarea>
<button id="go">运行</button>
</div>
</body>
<script type="text/javascript">
var go = document.getElementById("go");
go.onclick = function(){
var html_input = document.getElementById("html-input").value;
document.getElementById("test-html").innerHTML = html_input;
}
</script>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
