【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 + ⬇️，把一行代码直接向下移动，不用剪切后复制