HTML-JavaScript动态添加元素appendChild

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

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


0208给自己一句鼓励的话.gif
这里我贴一下实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给自己一句鼓励的话</title>
    <style>
        body{
            background-color: #2A3950;
        }
        #head{
            color: white;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }
        #contents{
            margin: 20px auto 20px auto;
            
        }
        #contents p {
            color: turquoise;
            margin: 10px auto 10px 20px; 
        }
        #button{ 
            align-content: center;
            border: 1px solid white;
            border-radius: 4px;
            background-color: violet;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 10px 30px;  
            margin: 40px 50px;  
        }
    </style>
    <script>
        let arr = [
        '我要坚持完成前端小课第一阶段的内容!',
        '我的目标是学好前端!',
        '大家共同努力!',
        '前端小课开课啦!',
        '今天是学习的第四天,继续加油!',
        '武汉加油!'
        ];
        function btnClick() {
            let index = Math.floor(Math.random() * arr.length + 0);
            let div = document.createElement('div');  //创建一个新的div元素
            let textNode = document.createTextNode(arr[index]);  //创建一个新的文本节点
            div.appendChild(textNode);  //方法将一个节点添加到指定父节点的子节点列表末尾
            div.style.color = "#fe7235";
            div.style.lineHeight = 2;
            let cont = document.getElementById("contents");
            cont.appendChild(div);
        }

    </script>
</head>
<body>
    <div id="head">给自己一句鼓励的话</div>
    <div id="contents"></div>
    <div id="button" onclick="btnClick()">鼓励自己一下</div>
</body>
</html>
这里解释一下用到的知识点:
  • 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()

推荐阅读更多精彩内容

  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 788评论 0 5
  • 转载请著名出处 GitHub-TYRMars 文章Github地址 JavaScript基础知识剖析 01 01-...
    TYRMars阅读 401评论 0 7
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,277评论 0 7
  • @转自GitHub 介绍js的基本数据类型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou阅读 875评论 0 0
  • 第1章 系好安全带,准备启航 1.1让你认识JS 1.1.1 JavaScript能做什么?增强页面动态效果(...
    张中华阅读 962评论 4 10
  • 7岁的杰森正在睡觉。他在学校的家庭日度过了一个忙碌的早晨,他想放松一下。不幸的是,他的父母知道,如果这个金发小孩白...
    slyljs阅读 591评论 0 2
  • #BEGIN181026313526311E4E4978908D8CF4F2A98FA13F908D8CF480B...
    所谓的迷惘阅读 98评论 0 0
  • 《父亲》 文/白传英 有时候觉得自己像小溪 碧波荡漾一年四季 当我干涸的时候 父亲就像那黄河 有时候觉得自己...
    白清风阅读 59评论 0 0
  • 最近我的买菜阵地是叮咚买菜,菜品质量不错、价格合理、送货免费且非常快,于是我基本上保持在一到两天买一次的频率。习惯...
    紫苑阅读 194评论 0 2
  • 4月22日下午,谢娜在微博上晒出了范冰冰李晨送给她的礼物,范冰冰送的是自创美妆品牌的产品,李晨送的是一个按摩椅,谢...
    娱乐圈有真爱阅读 431评论 0 0