HTML-JavaScript动态添加元素appendChild
HTML-JavaScript动态添加元素appendChild
傅_hc
发布于 2020-02-18 15:06:56
发布于 2020-02-18 15:06:56
开始自学一下前端的基础知识，这里记录一下知识点，毕竟不熟，不记录很容易就忘记了。前端最佳的学习资料就是在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
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录