html简单教学~

第一次在博客园安家，其实刚做前端的时候就写博客了，那时候也有博客园的账号，但是一直懒得用博客园（好吧我确实很懒，以后你们会发现我更懒）那么这就是我之前的第一篇前端博文（转过来貌似很多代码还不全，不过也没啥你们先凑合看喽。博客园我还不怎么会用的说。）：    

写一个线上解释器显然是搞不定的，尤其问了正在南大读研的同学之后，他告诉我至少用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，也是我暂且不知道如何解决的，在第二段输入时，我们自然希望有一个正确的规范，那么久需要换行，但因为我用的是截取字符，而在截取的时候换行字符判断不出来，希望有了解的大神可以给予指导~

转载于:https://www.cnblogs.com/qianyongV/p/3968771.html