HTML-JavaScript动态添加元素appendChild

开始自学一下前端的基础知识，这里记录一下知识点，毕竟不熟，不记录很容易就忘记了。前端最佳的学习资料就是在MDN，没有之一。

今天的目标是下面的页面：

0208给自己一句鼓励的话.gif

这里我贴一下实现代码：

    
    
    
    
    
    


    
给自己一句鼓励的话
    

    
鼓励自己一下

这里解释一下用到的知识点：

• Math 对象方法

Math.ceil();  //向上取整。

Math.floor();  //向下取整。

Math.round();  //四舍五入。

Math.random();  //0.0 ~ 1.0 之间的一个伪随机数。【包含0不包含1】 
//比如0.24543968315738995

• Math 实例说明：

Math.ceil(Math.random()*10);      // 获取从1到10的随机整数 ，取0的概率极小。

Math.round(Math.random());   //可均衡获取0到1的随机整数。

Math.floor(Math.random()*10);  //可均衡获取0到9的随机整数。

Math.round(Math.random()*10);  //基本均衡获取0到10的随机整数，其中获取最小值0和最大值10的几率少一半。

//因为结果在0~0.4 为0，0.5到1.4为1  ...  8.5到9.4为9，9.5到9.9为10。所以头尾的分布区间只有其他数字的一半。

//所以这句代码就是获取0~5直接的随机整数 
let index = Math.floor(Math.random() * arr.length + 0);

• 插入节点appendChild()--方法将一个节点添加到指定父节点的子节点列表末尾。

var child = node.appendChild(child);
//node 是要插入子节点的父节点.
//child 即是参数又是这个方法的返回值.

• CSS相关说明：

/* 应用于四个边 */
padding: 1em;

/* 垂直方向| 水平方向*/
padding: 5% 10%;

/* 顶部| 水平方向| 底部*/
padding: 1em 2em 2em; 

/* 顶部| 右边| 底部| 左边*/
padding: 2px 1em 0 1em;

标签用id来区分，CSS中就用#+id来取，例如：#button
标签用class来区分，CSS中就用.+class来取，例如：.button

所有代码都放在这个仓库：2020-Re-learning-web-lessons

学习来源：
第4天：给自己一句鼓励的话
js生成[n,m]的随机数
MDN文档-Math.random()