【JavaScript】九、JS基礎練習

文章目錄

1、練習：對象數組的遍歷
2、練習：猜數字
3、練習：生成隨機顏色

1、練習：對象數組的遍歷

需求：定義多個對象，存數組，遍歷數據渲染生成表格

let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小紅', age: 19, gender: '女', hometown: '河南省' },{ name: '小剛', age: 17, gender: '男', hometown: '山西省' },{ name: '小麗', age: 18, gender: '女', hometown: '山東省' }
]
for (let i = 0; i < students.length; i++) {for (let key in students[i]) {console.log(students[i][key])	// 拿到每個對象后，for in遍歷對象}
}

一般來說，目前沒有學dom操作，打印下面這個表格，都是先寫出死的html，再把html分塊剪切到script標簽中，使用document.write來輸出html標簽

在這里插入圖片描述
靜態html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head><body><h2>學生信息</h2><p>將數據渲染到頁面中...</p><table><caption>學生列表</caption><tr><th>序號</th><th>姓名</th><th>年齡</th><th>性別</th><th>家鄉</th></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr><tr><td>1</td><td>小明</td><td>18</td><td>男</td><td>河北省</td></tr></table></body></html>

結合JS：

<body><h2>學生列表</h2><table><tr><th>序號</th><th>姓名</th><th>年齡</th><th>性別</th><th>家鄉</th></tr><script>let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小紅', age: 19, gender: '女', hometown: '河南省' },{ name: '小剛', age: 17, gender: '男', hometown: '山西省' },{ name: '小麗', age: 18, gender: '女', hometown: '山東省' }]for (let i = 0; i < students.length; i++) {// 拿到每一個對象let student = students[i]document.write(`<tr><td>${i + 1}</td>`)// 遍歷對象的每個屬性for (let key in student) {document.write(`<td>${student[key]}</td>       `)}// 一行數據寫完了，打印結束標簽document.write(`</tr>`)}</script></table></body>

但這里想復雜了，沒必要普通for套一個for in，直接一層for循環：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 600px;text-align: center;}table,th,td {border: 1px solid #ccc;border-collapse: collapse;}caption {font-size: 18px;margin-bottom: 10px;font-weight: 700;}tr {height: 40px;cursor: pointer;}table tr:nth-child(1) {background-color: #ddd;}table tr:not(:first-child):hover {background-color: #eee;}</style>
</head><body><h2>學生信息</h2><p>將數據渲染到頁面中...</p><table><caption>學生列表</caption><tr><th>序號</th><th>姓名</th><th>年齡</th><th>性別</th><th>家鄉</th></tr><!-- 數據部分才需要渲染，表頭不用，所以script寫這兒 --><script>// 數據準備let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小紅', age: 19, gender: '女', hometown: '河南省' },{ name: '小剛', age: 17, gender: '男', hometown: '山西省' },{ name: '小麗', age: 18, gender: '女', hometown: '山東省' }]// 渲染頁面for (let i = 0; i < students.length; i++) {// 模板字符串+document.write輸出標簽document.write(`<tr><td>${i + 1}</td><td>${students[i].name}</td><td>${students[i].age}</td><td>${students[i].gender}</td><td>${students[i].hometown}</td></tr>`)}document.write</script></table></body></html>

這里本質是遍歷數組 + 獲取對象的屬性值，那么查對象的兩種語法都可以用，不必硬套for in

2、練習：猜數字

需求：程序隨機生成 1~10 之間的一個數字，用戶輸入一個數字

如果大于該數字，就提示，數字猜大了，繼續猜
如果小于該數字，就提示，數字猜小了，繼續猜
如果猜對了，就提示猜對了，程序結束

<body><script>function guessNum(num = 0) {let random = Math.floor(Math.random() * 10 + 1)console.log(random)let count = 1// 或者while (true)for (; ;) {if (count >= 4) {alert(`超過四次沒猜對了，答案是${random}`)break}if (num === random) {alert('猜對了～')break} else if (num > random) {alert('猜大了！')count++num = +prompt('請重新輸入一個數字')} else if (num < random) {alert('猜小了！')count++num = +prompt('請重新輸入一個數字')}}}let num = +prompt('請輸入一個數字')guessNum(num)</script>
</body>

3、練習：生成隨機顏色

需求：該函數接收一個布爾類型參數，表示顏色的格式是十六進制還是rgb格式

提示: 16進制顏色格式為: #ffffff，其中f可以是任意 0-f之間的字符,需要用到數組，
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
提示: rgb顏色格式為: rgb(255,255,255) ，其中255可以是任意0-255之間的數字

<body><script>// 隨機顏色function getRandomColor(format = true) {let result = ''if (!format) {// 返回rgb(255,255,255)格式let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)result = `rbg(${r},${g},${b})`} else {result = '#'let array = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']for (let i = 1; i <= 6; i++) {let random = Math.floor(Math.random() * array.length)result = result + array[random]}}return result;}document.write(getRandomColor(true))</script>
</body>

VsCode中，Alt + ?? 或者option + ??，把一行代碼直接向下移動，不用剪切后復制

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/73845.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/73845.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/73845.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！