JS学习初体验

需求是：
①页面字体调大
解决办法：通过style="font-size:18px;"来改变字体大小。
②动态的生成每个人对应的10个题目按钮，点击题号能弹出题目与输入框
思路：本来我是尝试先做③，然后再做②，我把他们都写进了一个divide()函数里面，然后不管点击哪个题目按钮都只出现数组中定义的最后一题，查阅了资料发现可能是因为JS闭包的原因，我把两个需求写在一个函数里面，当html页面调用的时候，会先执行分题目的请求，当我点击题号时，又会重新分一次题目，然后返回数组中定义的最后一题。而且不能动态的在按钮上生成对应的题号。后来跟学长讨论，学长让我把问题细化，分成两个函数来写，问题就全部完美解决了。第一步先生成按钮。页面的格式大部分也是在js中实现的，连续生成多个按钮的方法是，定义一个变量a,a+=“<input type='button'>”；生成多个文本框同理a+=“<input type='text'>”。

function divide(){    
  var arr = new Array();
  var n = new Array();
  var a=""
    arr[1]="学校有14棵杨树、杨树的棵数是松树的2倍、柳树比松树多4棵，有多少棵柳树？";
    arr[2]="一只东北虎的重量是360千克、东北虎的重量大约是一只鸵鸟的4倍、 东北虎是一只企鹅的9倍。鸵鸟多少千克？";
    arr[3]="星光小学832名学生分4批去参观天文馆。平均每批有多少名学生？";
  for(j=1;j<4;j++){
      //var n= arr[j].split(/。|，/);  //同时对逗号和句号进行分割
    a+= "<input type='button' value='第"+j+"题' onClick = divide1('"+arr[j]+"') style='width:100px;margin:3px;'>";
  }
  document.getElementById("seg1").innerHTML=a  
}

③动态的按照“，”和“。”将每个题目分成小段并生成输入框。
思路：用split()方法进行分割，同时分割多个符号的话可以这样写“split(/。|，|、/);”但是只能同时对中文符号进行分割，英文符号的分割方法目前我还没找到，转义一下也不行。

function divide1(str){
//document.getElementById("seg").innerHTML = "<input type='button' value='获取题目' onClick='divide()'>";
    var n = str.split(/。|，|、/); 
    var b=""
    for(var i=0;i<n.length;i++){
      console.log(n[i]);
      b+= "<label>"+n[i]+"</label>:<input type='text' style='width:300px;margin:3px;'><br>";
    } 
    document.getElementById("seg2").innerHTML=b
}

④将文本框和对应的题目段都居中
**思路：**当我在定义按钮的input后面添加style=“margin-text:center”；时，我发现只有文本框中的提示文字被居中，文本框还是在老地方，根本没有用。于是不得不在html文件中定义了两个方法，让所有input和label标签都具有如下样式：

label{
    display: inline-block;
    text-align: right; //文本水平对齐方式
    width: 280px;
    padding: 10px;
}
input{
    font-size: 17px;
}

或者写在一个标签里面，如<h2>,然后<h2><input ...></h2>就行了。

h2{
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    padding: 30px 0;
}

待解决的问题
①连不上数据库
②split()怎么划分不同的英文符号
总结
刚开始听说要改需求的时候觉得好难，现在做出来了又觉得也还好，因为我的电脑连不上数据库，所以要写动态的方法交给学长改了再连数据库。自己动手添加一些样式在网页里面比单纯的看代码学东西更快。