前端-JS基础-day5
目录
1、对象的使用
2、对象的常用方法
3、对象的方法
4、遍历对象
5、遍历数组对象
6、渲染学生信息表
7、数学内置对象
8、随机数函数
9、随机点名
10、猜数字游戏
11、猜数字游戏-设定次数
12、随机颜色案例
13、综合案例-学成在线渲染
14、拓展
1、对象的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象的使用</title>
</head>
<body><script>// 1、声明对象let person = {uname: 'pink老师',age: 18,gender: '女'}console.log(person)console.log(typeof person)</script>
</body>
</html>2、对象的常用方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象的常用操作</title>
</head>
<body><script>let person = {uname: 'pink老师',age: 18,gender: '女'}// 查 // 1、对象名.属性名// 2、对象名['属性名']console.log(person.age)console.log(person['age'])// 改// 对象名.属性名 = 新值person.gender = '男'console.log(person)// 增// 对象名.属性名 = 新值person.address = '武汉'console.log(person)</script>
</body>
</html>3、对象的方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对象的方法</title>
</head>
<body><script>let obj = {// 属性uname: 'pink',// 方法song: function(){console.log('hello~~')},dance:function(){console.log('dance~~')}}// 方法调用 对象名.方法名obj.song()</script>
</body>
</html>4、遍历对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历对象</title>
</head>
<body><script>// for in 遍历 不建议用来遍历数组// let arr = ['pink', 'red', 'blue']// for(let k in arr){// console.log(k) // 数组的下标，索引号，但是是字符串类型 '0','1','2'// console.log(arr[k]) // arr[k] 对应 'pink','red','blue'// }// 遍历对象 for inlet obj = {uname: 'pink老师',age: 18,gender: '男'}for(let k in obj){console.log(k) // 属性名 'uname','age','gender'console.log(obj[k]) // 属性值 }</script>
</body>
</html>5、遍历数组对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历数组对象</title>
</head>
<body><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++){// console.log(i) // 下标索引// console.log(students[i]) // 每个对象console.log(students[i].name)console.log(students[i].hometown)}</script>
</body>
</html>6、渲染学生信息表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渲染学生信息表</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>// 1、数据准备let students = [{ name: '小明', age: 18, gender: '男', hometown: '河北省' },{ name: '小红', age: 19, gender: '女', hometown: '河南省' },{ name: '小刚', age: 17, gender: '男', hometown: '山西省' },{ name: '小丽', age: 18, gender: '女', hometown: '山东省' }]// 2、渲染页面for(let i =0; i < students.length; i++){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>`)}</script></table>
</body>
</html>7、数学内置对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数学内置对象</title>
</head>
<body><script>console.log(Math.PI)console.log('-----------------')// ceil 天花板 向上取整console.log(Math.ceil(1.1)) // 2console.log(Math.ceil(1.5)) // 2console.log(Math.ceil(1.9)) // 2console.log('-----------------')// floor 地板 向下取整console.log(Math.floor(1.1)) // 1console.log(Math.floor(1.5)) // 1console.log(Math.floor(1.9)) // 1console.log('-----------------')// round 四舍五入console.log(Math.round(1.1)) // 1console.log(Math.round(1.5)) // 2console.log(Math.round(1.9)) // 2console.log(Math.round(-1.1)) // -1console.log(Math.round(-1.5)) // -1console.log(Math.round(-1.51)) // -2console.log('-----------------')// 取整函数 parseInt(1.2) // 1// 取整函数 parseInt('12px') // 12// max 最大值 console.log(Math.max(1, 2, 3, 4, 5)) // 5// min 最小值console.log(Math.min(1, 2, 3, 4, 5)) // 1// abs 绝对值console.log(Math.abs(-1)) // 1</script>
</body>
</html>8、随机数函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机数函数</title>
</head>
<body><script>// 左闭右开，能取到 0，但是取不到 1，只能取到0~1之间的一个随机小数// console.log(Math.random())// 0~10 之间的整数// console.log(Math.floor(Math.random()*11))// let arr = ['red', 'green', 'blue']// let random = Math.floor(Math.random()*arr.length)// console.log(arr[random])// 取到 N~M 的随机整数function getRandom(N, M){return Math.floor(Math.random() * (M - N + 1)) +N}console.log(getRandom(4,8))</script>
</body>
</html>9、随机点名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机点名</title>
</head>
<body><script>let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']// 1、得到一个随机数，作为数组的索引号let random = Math.floor(Math.random() * arr.length)// 2、页面输出数组里面的元素document.write(arr[random])// 3、splice(起始位置下标，删除几个元素)// 删除已经抽到的元素 arr.splice(random, 1)console.log(arr)</script>
</body>
</html>10、猜数字游戏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏</title>
</head>
<body><script>// 1、随机生成一个数字 1~10// 取到 N~M 的随机整数function getRandom(N, M){return Math.floor(Math.random() * (M - N + 1)) +N}let random = getRandom(1, 10)// 需要不断的循环while(true){// 2、用户输入一个值let num = +prompt('请输入1~10之间的一个数字：')// 3、判断输出if(num > random){alert('猜大了')}else if(num < random){alert('猜小了')}else{alert('猜对了，真厉害')break // 退出循环}}</script>
</body>
</html>11、猜数字游戏-设定次数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏-设定次数</title>
</head>
<body><script>// 1、随机生成一个数字 1~10// 取到 N~M 的随机整数function getRandom(N, M){return Math.floor(Math.random() * (M - N + 1)) +N}let random = getRandom(1, 10)// 2、设定三次，三次没猜对就直接退出let flag = true // 开关变量for(let i = 1; i <= 3; i++){let num = +prompt('请输入1~10之间的一个数字：')if(num > random){alert('猜大了')}else if(num < random){alert('猜小了')}else{flag = falsealert('猜对了，真厉害')break // 退出循环}}// 写到for的外面来if(flag){alert('次数已经用完')}</script>
</body>
</html>12、随机颜色案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>随机颜色案例</title><style>div {width: 300px;height: 300px;}</style>
</head>
<body><div></div><script>// 1、自定义一个随机颜色函数function getRandomColor(flag = true){if(flag){// 3、如果是true，则返回 #fffffflet str = '#'let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']// 利用for循环随机抽6次，拼接到strfor(let i = 1; i <= 6; i++){// 每次要随机从数组里面抽取一个// random 是数组的索引号 是随机的let random = Math.floor(Math.random() * arr.length)str += arr[random]}return str}else{// 4、否则是 false,则返回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)return `rgb(${r}, ${g}, ${b})`}}// 2、调用函数 getRandomColor(布尔值)// console.log(getRandomColor(false)) // console.log(getRandomColor(true)) const div = document.querySelector('div')div.style.backgroundColor = getRandomColor()</script>
</body>
</html>13、综合案例-学成在线渲染
<!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><link rel="stylesheet" href="./css/style.css"><style></style>
</head>
<body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><script>let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]for(let i = 0; i < data.length; i++){document.write(`<li><a href="#"><img src=${data[i].src} alt="${data[i].title}"><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a></li>`)}</script></ul></div></div>
</body>
</html>14、拓展
