開始自學(xué)一下前端的基礎(chǔ)知識(shí)俄烁，這里記錄一下知識(shí)點(diǎn)涩咖，畢竟不熟海诲，不記錄很容易就忘記了。前端最佳的學(xué)習(xí)資料就是在MDN檩互，沒有之一特幔。
今天的目標(biāo)是下面的頁面：
0208給自己一句鼓勵(lì)的話.gif
這里我貼一下實(shí)現(xiàn)代碼：
<!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>給自己一句鼓勵(lì)的話</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 = [
'我要堅(jiān)持完成前端小課第一階段的內(nèi)容！',
'我的目標(biāo)是學(xué)好前端盾似！',
'大家共同努力敬辣！',
'前端小課開課啦雪标！',
'今天是學(xué)習(xí)的第四天零院，繼續(xù)加油！',
'武漢加油村刨！'
];
function btnClick() {
let index = Math.floor(Math.random() * arr.length + 0);
let div = document.createElement('div'); //創(chuàng)建一個(gè)新的div元素
let textNode = document.createTextNode(arr[index]); //創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)
div.appendChild(textNode); //方法將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾
div.style.color = "#fe7235";
div.style.lineHeight = 2;
let cont = document.getElementById("contents");
cont.appendChild(div);
}
</script>
</head>
<body>
<div id="head">給自己一句鼓勵(lì)的話</div>
<div id="contents"></div>
<div id="button" onclick="btnClick()">鼓勵(lì)自己一下</div>
</body>
</html>
這里解釋一下用到的知識(shí)點(diǎn)：
- Math 對象方法
Math.ceil(); //向上取整告抄。
Math.floor(); //向下取整。
Math.round(); //四舍五入嵌牺。
Math.random(); //0.0 ~ 1.0 之間的一個(gè)偽隨機(jī)數(shù)打洼×浜【包含0不包含1】
//比如0.24543968315738995
- Math 實(shí)例說明：
Math.ceil(Math.random()*10); // 獲取從1到10的隨機(jī)整數(shù) ，取0的概率極小募疮。
Math.round(Math.random()); //可均衡獲取0到1的隨機(jī)整數(shù)炫惩。
Math.floor(Math.random()*10); //可均衡獲取0到9的隨機(jī)整數(shù)。
Math.round(Math.random()*10); //基本均衡獲取0到10的隨機(jī)整數(shù)阿浓，其中獲取最小值0和最大值10的幾率少一半他嚷。
//因?yàn)榻Y(jié)果在0~0.4 為0，0.5到1.4為1 ... 8.5到9.4為9芭毙，9.5到9.9為10筋蓖。所以頭尾的分布區(qū)間只有其他數(shù)字的一半。
//所以這句代碼就是獲取0~5直接的隨機(jī)整數(shù)
let index = Math.floor(Math.random() * arr.length + 0);
- 插入節(jié)點(diǎn)appendChild()--方法將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾退敦。
var child = node.appendChild(child);
//node 是要插入子節(jié)點(diǎn)的父節(jié)點(diǎn).
//child 即是參數(shù)又是這個(gè)方法的返回值.
- CSS相關(guān)說明：
/* 應(yīng)用于四個(gè)邊 */
padding: 1em;
/* 垂直方向| 水平方向*/
padding: 5% 10%;
/* 頂部| 水平方向| 底部*/
padding: 1em 2em 2em;
/* 頂部| 右邊| 底部| 左邊*/
padding: 2px 1em 0 1em;
標(biāo)簽用id來區(qū)分粘咖，CSS中就用#+id來取，例如：#button
標(biāo)簽用class來區(qū)分侈百，CSS中就用.+class來取瓮下，例如：.button
所有代碼都放在這個(gè)倉庫：2020-Re-learning-web-lessons
學(xué)習(xí)來源：
第4天：給自己一句鼓勵(lì)的話
js生成[n,m]的隨機(jī)數(shù)
MDN文檔-Math.random()
