专栏首页iOS开发随笔HTML-JavaScript动态添加元素appendChild

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML- white-space 和 overflow 两个重要的 CSS 属性

    CSS的作用是给 HTML 元素添加样式和布局,接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动,效果如下:

    傅_hc
  • React Native 第一篇-Hello World!

    傅_hc
  • SceneKit基本概念

    傅_hc
  • 前端面试题整理

    两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块<aside>域浮动,<aside>浮动后覆盖绿色<main>, 再将<main> overflow:au...

    仇诺伊
  • box-sizing

            在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

    十月梦想
  • 射雕的"双飞翼布局"

    符合"渐进增强"标准+栅格理论,同时兼容性也不错,几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...

    菩提树下的杨过
  • 前端基础-Vue.js模板语法(插值)

    我们在前面的代码中,使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值;

    cwl_java
  • 利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码

    今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码,离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了,第...

    林老师带你学编程
  • 清华大学 & CAAI发布《2019人工智能发展报告》:神经网络30年的4大发展脉络(附下载)

    那么,最近30年来,神经网络的发展有哪些主线?2019年人工智能界有哪些大事发生?哪些AI人才和新模型的出现正主导行业发展?

    大数据文摘
  • 详解NodeList 和 HTMLCollection 和 Array

    Array,NodeList, HTMLCollection这三个概念和它们之间的关系有很多做了几年前端的同学都搞不清楚,经常遇到但是又感觉很陌生,剪不断理还乱...

    MudOnTire

扫码关注云+社区

领取腾讯云代金券