html 測試 單入 單出

html 測試 單入 單出

HTML input

00

<style>
.LLtext, .LLif{  width:100%; background-color:azure;font-size:18px}


.LRC { background-color:azure;
     cursor:pointer;     
     float:left; display:     
     table-cell;
     vertical-align: middle;   
     text-align: center;   
     width: 80px;   
     border: thin solid black;
     font-size:18px }
</style>


<script>/* --------單入 單出-----LOAD-----------*/
function WWFT(x,w1){
var x0 = document.getElementById(x);
var x1 = x0.querySelector(".DP");
var strVar="";
strVar += "<table border='2' style='width: 100%;'>";
strVar += "<tbody >";
strVar += "<tr ><td >";
strVar += "<form>";
strVar += "<div class='LRC' id='" + x + "AL1' onclick='WWdp(this.id)'>預覽</div>";
strVar += "<div class='LRC' id='" + x + "AL2' onclick='WWin(this.id)'>寫程式</div>";
strVar += "<div class='LRC' id='" + x + "AL3' onclick='WWrs(this.id)'>還原</div><br>";
strVar += "<textarea style='height:" + w1 + "px' class='LLtext' id='" + x+ "TTL' spellcheck='false' wrap='logical'>LLLLLLLLLLLLLLLLL";
strVar += "<\/textarea>";
strVar += "<iframe style='height:" + w1 + "px' class='LLif' id='" + x + "ifL' ><\/iframe>";
strVar += "<\/form>";
strVar += "</td></tr>";
strVar += "</tbody>";
strVar += "</table>";
x1.innerHTML=strVar ;
WWrs(x+"AL1");
}
</script>

<script>/* --------單入 單出-----DP-----------*/
function WWdp(qq1){
var Mid= qq1.substring(0,qq1.length-3);
document.getElementById(Mid+'AL1').style.backgroundColor = "azure";
document.getElementById(Mid+'AL2').style.backgroundColor = "gainsboro";

document.getElementById(Mid+'TTL').style.display='none';
document.getElementById(Mid+'ifL').style.display='block';
var Ttext = document.getElementById(Mid+'TTL').value;
var Ri= document.getElementById(Mid+'ifL');
Ri.innerHTML = "";
var ifrw = (Ri.contentWindow) ? Ri.contentWindow : (Ri.contentDocument.document) ? Ri.contentDocument.document : Ri.contentDocument;
ifrw .document.open();
ifrw .document.write(Ttext);
ifrw .document.close();}
</script>

<script>/* --------單入 單出-----rs-----------*/
function WWrs(qq1){
var Mid= qq1.substring(0,qq1.length-3);
var x0 = document.getElementById(Mid);
var LL = x0.querySelector(".LLtextA");
document.getElementById(Mid+'TTL').value = LL.value;
WWdp(qq1);}
</script>

<script>/* --------單入 單出-----input-----------*/
function WWin(qq1){
var Mid= qq1.substring(0,qq1.length-3);

document.getElementById(Mid+'AL1').style.backgroundColor = "gainsboro";
document.getElementById(Mid+'AL2').style.backgroundColor = "azure";
document.getElementById(Mid+'TTL').style.display='block';
document.getElementById(Mid+'ifL').style.display='none';
}
</script>

<!----------------------------------------------------------------------------------->
<div id="W999999999">
<textarea class="LLtextA" spellcheck="false" style="display: none;" wrap="logical">
HTML input
</textarea>
<div class="DP">00</div>
</div>
<!----------------------------------------------------------------------------------->
<script>
WWFT('W999999999','400');
</script>