求和函数封装练习
要求:
封装函数, 名字为sum
功能: 根据传入的两个数,求和并且返回求和的结果（函数必须有return返回值）
javascript
<script>
function sum(x, y) {
let res = x + y
return res
// return x + y
}
let te = sum(1, 2)
document.write(`两者的和是${te}`)
</script>实现两个数的值交换(函数版本)
分析:
函数名为 changeNum()
调用函数时,
changeNum(1，2)经过函数内部处理后,输出
第一个值的结果是2 第二个值的结果是1可以多调用两次
javascript
<script>
function changeNum(x,y) {
let temp = x
x = y
y = temp
document.write(`第一个值的结果是${x} <br> 第二个值的结果是${y}`)
}
changeNum(3,4)
changeNum('blue', 'red')
</script>封装余额函数
要求:
运行程序后, 浏览器显示输入确认框(prompt)
第一个输入确认框提示输入银行卡余额
第二个输入确认框提示输入当月食宿消费金额
第三个输入确认框提示输入当月生活消费金额
输入完毕后,在页面中显示银行卡剩余金额
提示: 所有功能代码封装在函数内部（函数需要把余额返回）
javascript
<script>
function result() {
let a = prompt('银行卡金额')
let b = prompt('当月食宿消费金额?')
let c = prompt('当月生活消费金额?')
let d = a - b - c
return d
}
let money = result()
document.write(`我的银行卡余额还有${money}元`)
</script>封装一个函数,可以求任意数组的和 或 平均值
要求：
函数可以传递2个参数，比如 handleData(arr, true)
handleData 处理数据的意思
参数一： 接受实参传递过来的数组
参数二: 布尔类型 如果是true或者不传递参数 是求和操作， 如果传递过来的参数是 false 则是求平均值
javascript
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, 2, 3])) // 6
console.log(handleData([1, 2, 3], true)) // 6
console.log(handleData([1, 2, 3], false)) // 2需求： 封装 some 函数查看数组是否存在某个元素 。
要传递2个参数 元素、数组
如果数组存在元素则返回true，如果没有存在元素就返回 false
例如检测 香蕉 是否存在于 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 true
javascript
function some(ele, arr = []) {
// console.log(ele, arr)
// 1. 声明一个flag变量，里面先存储 false
let flag = false
// 2. 遍历循环如果找到了则 修改 flag 里面的值为true， 同时中断循环 break
for (let i = 0; i < arr.length; i++) {
if (ele === arr[i]) {
flag = true
break
}
}
// 3. 返回这个 falg变量
return flag
}
let re = some('荔枝', ['苹果', '香蕉', '橘子', '荔枝', '梨子'])
console.log(re) // true
let re1 = some('榴莲', ['苹果', '香蕉', '橘子', '荔枝', '梨子'])
console.log(re1) // false需求： 封装 findeIndex 函数返回查找元素在数组中的索引号。
要传递2个参数 元素、数组
如果找到，则返回查找元素在数组中的索引号，如果查找不到，则返回 -1
例如检测 香蕉 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 1
javascript
<script>
// 封装函数返回元素的下标 [1, 5, 10, 22, 8, 7]
// 1. 封装函数 findIndex，传递2个参数 元素、数组
function findIndex(ele, arr = []) {
// 2. 声明一个index变量初始值为 -1
let index = -1
// 3. 遍历循环如果找到则修改index为当前的索引号，中断循环
for (let i = 0; i < arr.length; i++) {
if (ele === arr[i]) {
index = i
break
}
}
// 4. 返回index变量
return index
}
let index1 = findIndex(10, [1, 5, 10, 22, 8, 7])
console.log(index1) // 2
let index2 = findIndex(8, [1, 5, 10, 22, 8, 7])
console.log(index2) // 4
let index3 = findIndex(88, [1, 5, 10, 22, 8, 7])
console.log(index3) // -1
</script>点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字
javascript
<script>
// 1.点名：每次刷新网页运行，在控制台随机输出一位同学的名字["老赵", "老李", "小传", "小黑","小陈"]，如果输出了，则数组中删除这个名字
let arr = ["老赵", "老李", "小传", "小黑","小陈"]
// 得到一个随机数，作为数组的索引号，这个随机数0-5
let random = Math.floor(Math.random() * arr.length)
// 页面输出数组里面的元素
document.write(arr[random])
// splice(起始位置（下标），删除几个元素)
arr.splice(random,1)
console.log(arr);
</script>声明对象
要求:
声明一个变量per, 类型为对象类型
该对象的属性为性别,年龄,爱好(3个)
该对象的方法有 说话, 吃饭(2个)
在控制台分别调用该对象的属性和方法
javascript
<script>
// 1. 声明一个变量per, 类型为对象类型
// 2. 该对象的属性为性别,年龄,爱好(3个)
// 3. 该对象的方法有 说话, 吃饭(2个)
// 4. 在控制台分别调用该对象的属性和方法
let per = {
sex : 'man',// 年龄
age : 18,// 性别
hobby : 'studyAndGame' ,// 爱好
speak: function(){
// 说话
document.write(`speak方法被调用了------------<br>`)
},
eat:function(){
document.write(`eat方法被调用了------------`)
}
}
// 调用部分
document.write(`姓名:${per.sex} <br>`)
document.write(`姓名:${per.age}<br>`)
document.write(`姓名:${per.hobby}<br>`)
// 调用方法
per.speak()
per.eat()
</script>调用对象的方法
要求:
对象声明完毕后, 调用对象中的吃饭的方法
提示: 对象中的方法本质是函数, 调用需要加()
方法也可以传递参数的
javascript
<script>
// 调用对象的方法
// 1. 对象声明完毕后, 调用对象中的吃饭的方法
// 2. 提示: 对象中的方法本质是函数, 调用需要加()
// 3. 方法也可以传递参数的
let per = {
sex: 'man', // 年龄,
age: 18, // 性别,
hobby: 'studyAndGame', // 爱好
speak: function () {
// 说话,
document.write(`speak方法被调用了---<br>`)
},
eat: function (f) {
// 吃饭
document.write(`我今天吃的是${f}`)
}
}
// 下面是调用部分
document.write(`姓名:${per.sex} <br>`)
document.write(`姓名:${per.age}<br>`)
document.write(`姓名:${per.hobby}<br>`)
// 调用方法
per.speak()
per.eat('苹果')
</script>猜数字游戏，设定次数，最多猜8次
javascript
<script>
// 猜数字游戏，设定次数，最多猜8次
function random(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min
}
// 生成一个数字先，猜0-20之间的数
let num = random(0,20)
let flag = true
// 最多猜8次
for(let i = 1; i <= 8; i++){
let userNum = prompt('请输入您要猜的数字')
// 比较数字
if(userNum > num){
alert('您猜的数字大了')
}else if(userNum < num){
alert('您猜的数字小了')
}else{
flag = false
alert('恭喜您猜对了')
break
}
}
if(flag){
alert('太笨了，这都猜不到')
}
</script>随机生成颜色
javascript
<script>
//随机生成颜色
//1. 自定义一个随机颜色函数
function getRandomColor(flag = true){
if(flag){
// 3.如果是true，则返回 #ffffff
let str = '#'
let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
// 利用for循环随机抽6次，累加到str里面
for(let i = 1; i <= 6; i++){
// 每次要随机从数组里面抽取一个
// random是数组的索引号 是随机的
let random = Math.floor(Math.random() * arr.length)
// str = str + arr[random]
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))
console.log(getRandomColor())
</script>利用对象数组渲染英雄列表案例
功能1：
利用对象数组里面的数据来渲染页面，渲染多个数据
鼠标经过停留会显示
英雄名字
javascript
<!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/hero.css">
</head>
<body>
<!-- 利用对象数组渲染英雄列表案例 -->
<!-- <ul class="list">
</ul> -->
<script>
const datas = [
{ name: '司马懿', imgSrc: '01.jpg' },
{ name: '女娲', imgSrc: '02.jpg' },
{ name: '百里守约', imgSrc: '03.jpg' },
{ name: '亚瑟', imgSrc: '04.jpg' },
{ name: '虞姬', imgSrc: '05.jpg' },
{ name: '张良', imgSrc: '06.jpg' },
{ name: '安其拉', imgSrc: '07.jpg' },
{ name: '李白', imgSrc: '08.jpg' },
{ name: '阿珂', imgSrc: '09.jpg' },
{ name: '墨子', imgSrc: '10.jpg' },
{ name: '鲁班', imgSrc: '11.jpg' },
{ name: '嬴政', imgSrc: '12.jpg' },
{ name: '孙膑', imgSrc: '13.jpg' },
{ name: '周瑜', imgSrc: '14.jpg' },
{ name: 'XXX', imgSrc: '15.jpg' },
{ name: 'XXX', imgSrc: '16.jpg' },
{ name: 'XXX', imgSrc: '17.jpg' },
{ name: 'XXX', imgSrc: '18.jpg' },
{ name: 'XXX', imgSrc: '19.jpg' },
{ name: 'XXX', imgSrc: '20.jpg' }
]
let str = ''
for (let i = 0; i < datas.length; i++) {
str += `
<li><img src="./uploads/heros/${datas[i].imgSrc}" title="${datas[i].name}"></li>
`
}
document.write(`
<ul class="list">
${str}
</ul>
`)
</script>
</body>
</html>根据数据完成表格渲染
功能需求：
表格行要求 编号、科目、成绩、和 删除链接
最后计算出总分 和 平均分
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles/index.css" />
<title>Document</title>
</head>
<body>
<script>
// 核心数据
const data = [
{ subject: '语文', score: 46 },
{ subject: '数学', score: 80 },
{ subject: '英语', score: 100 },
]
let tr = ''
let total = 0 // 计算总分
for (let i = 0; i < data.length; i++) {
tr += `
<tr>
<td>${i + 1}</td>
<td>${data[i].subject}</td>
<td>${data[i].score}</td>
<td><a href="#">删除</a></td>
</tr>
`
total += data[i].score
}
document.write(`
<div id="app" class="score-case">
<div class="table">
<table>
<thead>
<tr>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
${tr}
</tbody>
<tbody>
<tr>
<td colspan="5">
<span class="none">暂无数据</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<span>总分：${total}</span>
<span style="margin-left: 50px">平均分：${total / data.length}</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
`)
</script>
</body>
</html>