发表于： 2023-02-15 21:00:04
0 283
案例练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1、 求和函数 封装函数 名字为sum
// 功能 根据传入的两个数，求和并且返回求和结果 （函数必须有return返回值）
// function sum(x, y) {
// x = x || 0
// y = y || 0
// return x + y
// }
// console.log(sum(1, 2))
//2、实现两个数的值交换 函数名为 changeNum() 调用函数时：changeNum(1,2)
// 经过函数内部处理后，输出第一个的结果是2，第二个的结果是1
// 可以多调用两次
// function changeNum(x,y) {
// x = x || 0
// y = y || 0
// let sum = x > y ? x : y
// console.log(sum)
// }
// changeNum(1, 2)
//3、 封装余额函数 运行程序之后 浏览器显示输入框
//第一个输入框 提示输入银行卡余额 第二个提示输入当月食宿消费金额
//第三个 提示当月生活费消费金额 输入完毕之后页面显示银行卡余额
// function balance() {
// let a = +prompt('您的银行卡余额是：')
// let b = +prompt('您这个月食宿费用为：')
// let c = +prompt('您这个月生活费费用为：')
// let sum = 0
// sum = a - b - c
// document.write(`银行卡余额为：${sum}元`)
// }
// balance()
//4、函数可以传递两个参数 比如 handleData(arr,true)
// 接受实参传递过来的数组 布尔类型 如果是true 或者不传递参数 是求和操作， 如果传递过来的参数是 false 则是求平均值
// function handleData(arr, flag = true) {
// let sum = 0
// for(let i = 0; i < arr.length; i++) {
// sum += arr[i]
// }
// if(flag) {
// return sum
// }else {
// return sum / arr.length
// }
// }
// console.log(handleData([1,3,5],true)) //9
// console.log(handleData([1,3,5],false)) //3
//5、 封装 some的函数查看数组是否存在某个元素
//要传递两个参数元素 数组 如果数组存在元素则返回true 如果没有存在元素 就返回 false
//例如检测 香蕉 是否存在于 ['苹果','香蕉','橘子','荔枝','梨子']，结果是返回true
// function some(arr) {
// let result = arr.some(ele => ele === '香蕉') //true
// console.log(result)
// }
// some(['苹果','香蕉','橘子','荔枝','梨子'])
//6、封装 findeIndex 函数返回值查找元素 在数组中的索引号
//传递两个参数 数组
//如果找到，则返回查找元素在数组中的索引号，如果找不到则返回-1
//例如检测 香蕉 是否存在于 ['苹果','香蕉','橘子','荔枝','梨子']，结果是返回1
// function findeIndex(ele,arr = []) {
// //声明一个初始值为 -1
// let index = -1
// for(let i = 0; i < arr.length; i++) {
// if(ele === arr[i]) {
// index = i
// break
// }
// }
// //返回变量
// return index
// }
// let index1 = findeIndex(10, [1, 5 ,10, 22, 8 ,7])
// console.log(index1) //2
// let index2 = findeIndex(8, [1, 5 ,10, 22, 8 ,7])
// console.log(index2) //4
// let index3 = findeIndex(20, [1, 5 ,10, 22, 8 ,7])// console.log(index3) // -1
function fn(x, y) {
x = x || 0
y = y || 0
console.log(x + y)
}
fn(1, 2)
// fn()
// let age = 18
// console.log(false && age++) //age++ 不执行 一假则假
// console.log(age)
// console.log(11 && 22) //都是真， 这返回最后一个真值
// console.log(11 || 22) //输出第一个真值</script>
</body>
</html>
今天的js知识：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 600px;
text-align: center;
}
table,
tr,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-width: 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>
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>性别</td>
<td>家乡</td>
</tr>
<!-- script写在这样-->
<script>
//1、数据准备
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '东北省'},
{name: '小强', age: 17, gender: '男', hometown: '山东省'},
{name: '小花', age: 18, gender: '女', hometown: '山西省'},
{name: '小刚', age: 20, gender: '男', hometown: '四川省'}
]
//渲染页面
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>
<script>
//声明对象
// let obj = {
// uname: '李白',
// age: '18',
// gender: '男'
// }
//
// let goods = {
// 'goods-name': '手机',
// num: '0100001010',
// weight: '0.55kg',
// address: '成都'
// }
// //查 对象名.属性名 对象名['属性名']
// console.log(goods['goods-name'])
// //增 对象名.新属性名 = 新值
// console.log(goods.color = 'pink')
// //改
// console.log(goods.uname = '小米10PLUS')
// //删 delete 对象名.属性
//
// console.log(goods)
//对象的方法
// let obj = {
// uname: '刘德华',
// //方法
// sing: function () {
// console.log('冰雨')
// }
// }
// obj.sing()
//遍历对象
// let obj = {
// uname: '刘德华',
// age: 18,
// gender: '男'
// }
// for (let k in obj) {
// console.log(k) //属性名 字符串类型的 'uname'
// console.log(obj[k])
// }
//渲染学生信息表格案例
// let students = [
// {name: '小明', age: 18, gender: '男', hometown: '河北省'},
// {name: '小红', age: 18, gender: '女', hometown: '东北省'},
// {name: '小强', age: 18, gender: '男', hometown: '山东省'},
// {name: '小花', age: 18, gender: '女', hometown: '山西省'},
// ]
// for(let i = 0; i < students.length; i++) {
// // console.log(students[i])
// console.log(students[i].name)
// }
// 数学内置对象
console.log(Math.PI)
//方法 Math.ceil() 向上取整
console.log(Math.ceil(1.1)) // 2 向上取整
console.log(Math.ceil(-1.1)) // -1 向上取整
console.log('---------------------------------')
//Math.floor() 向下取整
console.log(Math.floor(1.1)) //// 1 向下取整
console.log(Math.floor(-1.1)) //// -2 向下取整
console.log('---------------------------------')
// Math.round() 四舍五入
console.log(Math.round(3.5)) // 4 四舍五入
console.log(Math.round(3.4)) // 3 四舍五入
console.log(Math.round(-20.5)) //-20
console.log(Math.round(-20.51)) //-21
console.log('---------------------------------')
//Math.sqrt()开平方
console.log(Math.sqrt(9)) //3
</script>
</body>
</html>
返回列表
评论