Code test code html, css, js online with php
Cũng khá là đơn giản chỉ với vài chục dòng code là bạn đã có thể compiler y chan như w3school.
Nào xem code demo nhé :- Code demo giống w3school, ở đây chỉ chia ra 2 khung 1 khung là editor và 1 khung là kết quả.
<!DOCTYPE HTML>
<html>
<head>
<style> textarea, iframe
{
border:1px solid #000;
height:200px;
width:100%;
}
</style>
</head>
<body>
<table border="2" width="100%" height="100%"> <tr><th>
<table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="50%" scope="col"> </td>
<td width="50%" scope="col" align="left">
<center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Viết code html, css, js !</b></center>
<textarea name="sourceCode" id="sourceCode">
<html>
<head> <title>My Codes</title> </head>
<body>
<h1> Test code online!</h1>
<p> Viết HTML, Javascript hoặc CSS ở đây & click run code!</p>
</body>
</html>
</textarea>
</form>
</td>
<td><b><center>Kết quả</b></center>
<iframe name="targetCode" id="targetCode"> </iframe> </td>
</table>
<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document:
iframe.contentDocument;
iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
</body>
</html>
====
- Code demo giống trang jsfiddle.net chia ra html riêng, css riêng, js riêng.
<!doctype html>
<!--Bhaskar Tiwari -- Editor Duy-->
<html>
<head>
<meta charset="utf-8">
<title>Editor Code PHP</title>
</head>
<body>
<table>
<tr>
<td>
<div class="tag">HTML (Body)</div>
<div id="html" class="content" contenteditable></div>
</td>
<td>
<div class="tag">CSS</div>
<div id="css" class="content" contenteditable></div>
</td>
</tr>
<tr>
<td>
<div class="tag">JavaScript</div>
<div id="js" class="content" contenteditable></div>
</td>
<td>
<div class="tag">Output</div>
<iframe id="output"></iframe>
</td>
</tr>
</table>
</body>
</html>
<script>
window.onload=function(){
var html=document.getElementById("html"),
css=document.getElementById("css"),
js=document.getElementById("js"),
output=document.getElementById("output"),
working=false,
fill=function(){
if(working){
return false;
}
working=true;
var document=output.contentDocument,
style=document.createElement("style"),
script=document.createElement("script");
document.body.innerHTML=html.textContent;
style.innerHTML=css.textContent.replace(/\s/g,"");
script.innerHTML=js.textContent;
document.body.appendChild(style);
document.body.appendChild(script);
working=false;
};
html.onkeyup=fill;
css.onkeyup=fill;
js.onkeyup=fill;
}
</script>
<style>
html,body,table,div.content,iframe{
border:0;
height:100%;
margin:0;
padding:0;
width:100%;
}
td{
border:2px solid black;
height:50%;
padding:25px 5px 5px 5px;
position:relative;
vertical-align:top;
width:50%;
}
div.tag{
position:absolute;
right:5px;
top:5px;
}
</style>
--NOTE : Mình cũng tham khảo nhiều nguồn, đã chọn lọc và edit lại sao cho các bạn xem 1 cách dể hiểu nhất. Có thắc mắc nào các bạn cứ để lại câu hỏi mình sẽ trả lời hết..
Comments
Post a Comment