html簡單教學~

標籤：style   blog   http   color   io   ar   div   sp   cti   

第一次在部落格園安家，其實剛做前端的時候就寫部落格了，那時候也有部落格園的帳號，但是一直懶得用部落格園（好吧我確實很懶，以後你們會發現我更懶）那麼這就是我之前的第一篇前端博文（轉過來貌似很多代碼還不全，不過也沒啥你們先湊合看嘍。部落格園我還不怎麼會用的說。）：    

寫一個線上解譯器顯然是搞不定的，尤其問了正在南大讀研的同學之後，他告訴我至少用PHP是無法實現的~
    OK，雖然是實現不了不代表就一點想法也沒有，事實上，code最愉快的事情就是有時候你覺得永遠不可能的事情還是有希望的（起碼可以做到看起來有希望）。
    於是想到可以做一個簡單的HTML標籤教學~
第一步，產生兩個視窗

左邊用textarea標籤為輸入內容為輸出第一條教學指令。右邊則用一個div作為要填充的教學指令
那麼下一步就是構建jquery代碼，其實這個程式總體來說很簡單，博主也只是想達到一個簡單的效果，看是否原理上可以實現。思路也很簡單，不停讀取左邊的內容（setInterval函數，截取前一段字元進行判斷，如果是我們所需要輸入的，那麼就說明使用者做出了正確的步驟，就將右邊的代碼填充相應的內容。大概思路是這樣，代碼也很簡單，如下：
$(function(){

function func(){
  var odiv=$(".mast3");
  var odiv2=$(".mast4");
  var otext=$("#ma");
  var stru=otext.val();
  var stru1=stru.substr(0,13);
  var stru2=stru.substr(13,13);
  na1="請輸入";
  ce=""
  var str=document_createTextNode(na1);
    var str2=document_createTextNode(ce);
  $(odiv).html(str);
  $(odiv2).html(str2);
  if(stru1=="")
  {
  var ce=""
  var na2="請輸入";
  var str=document_createTextNode(na2);
  var str2=document_createTextNode(ce);
  $(odiv).html(str);
  $(odiv2).html(str2);
  }
    if(stru2=="")
  { 
  var na2="恭喜你完成本課程！";
  var str=document_createTextNode(na2);
  $(odiv).html(str);
  $(odiv2).html("");
  }
}
setInterval(func,100);
});
css代碼：
.mast{width:400px;height:500px;}
.mast2{width:400px;height:500px;border: 1px solid #CFCFCF;margin:0;padding:0;}
p{margin:0;padding:0;}
li{float:left;list-style:none;}
.name{display:none;}
.mast4{color:blue;}
OK，不過值得一提的是為了讓我們需要讓使用者輸入的那段代碼有一定的樣式，於是我們做了兩個分段的填充，並且在最後進行一個清除。

OK，那麼這樣一來基本的效果就都能實現了，不過這裡有一個麻煩的bug，也是我暫且不知道如何解決的，在第二段輸入時，我們自然希望有一個正確的規範，那麼久需要換行，但因為我用的是截取字元，而在截取的時候換行字元判斷不出來，希望有瞭解的大神可以給予指導~

html簡單教學~