开始自学一下前端的基础知识, 这里记录一下知识点, 毕竟不熟, 不记录很容易就忘记了. 前端最佳的学习资料就是在 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
来源: http://www.jianshu.com/p/f8a5141c6f24