文章目录
- 思维导图-1
- 思维导图-2
- 数组生成柱状图
- 99乘法表案例
- 参数是数组的函数
- 冒泡排序
- 秒转化成时分秒
- 匿名函数
- 求数组最值函数
- 数组筛选
- 无参函数
- 有参函数
思维导图-1
思维导图-2
数组生成柱状图
<!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"><title>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head><body><script>let arrH = []for (let i = 0; i < 4; i++) {arrH[i] = +prompt(`请输入第${i}季度的高度：`)}console.log(arrH)document.write(`<div class="box">`)for (let i = 0; i < 4; i++) {document.write(`<div style="height: ${arrH[i]}px;"><span>${arrH[i]}</span><h4>第${i + 1}季度</h4></div>`)}document.write(`</div>`)</script>
</body></html>
99乘法表案例
<!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>span {display: inline-block;/* display: flex; */width: 100px;padding: 10px;margin: 5px;border: 1px solid #000;text-align: center;}</style>
</head><body><script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j}*${i}=${i * j}</span>`)}document.write('<br>')}</script>
</body></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>
</head><body><script>function getArr(arr) {let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}alert(sum)}getArr([1, 2, 3])// getArr(1, 2, 3)</script>
</body></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>
</head><body><script>let arr = [5, 4, 3, 2, 1]for (let i = 0; i < arr.length - 1; i++) {for (let j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {let temp = arr[j + 1]arr[j + 1] = arr[j]arr[j] = temp}}}console.log(arr)// 升序// arr.sort(function(a,b){// return a-b// })</script>
</body></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>
</head><body><script>let num = +prompt('请输入秒数')function getTime(num) {let h = parseInt(num / 60 / 60 % 24)let s = parseInt(num / 60 % 60)let m = parseInt(num % 60)h = h < 10 ? '0' + h : hs = s < 10 ? '0' + s : sm = m < 10 ? '0' + m : mreturn `转换之后的时间是：${h}:${s}:${m}`}document.write(getTime(num))</script>
</body></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>
</head><body><script>let fun = function (x, y) {document.write(x + y)}fun(1, 2);(function (x, y, z) {document.write(x + y + z)})(1, 2, 3);(function () { document.write(55) }())</script>
</body></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>
</head><body><script>function getArrM(arr = []) {let max = arr[0]let min = arr[0]for (let i = 1; i < arr.length; i++) {if (arr[i] > max) {max = arr[i]}// if (arr[i] < min) {// min = arr[i]// }min = arr[i] < min ? arr[i] : min}return [max, min]}let M = getArrM([1, 2, 3, 4])alert(M[0])alert(M[1])</script>
</body></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>
</head><body><script>let arr = [2, 0, 6, 1, 77, 12, 34, 1, 4, 5, 67, 99]let arrMax = []for (let i = 0; i < arr.length; i++) {if (arr[i] >= 10) {arrMax.push(arr[i])}}console.log(arrMax)</script>
</body></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>
</head><body><script>function add() {let sum = 0for (let i = 1; i <= 100; i++) {sum += i}alert(sum)}add()</script>
</body></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>
</head><body><script>function getSum(num1 = 0, num2 = 0) {let sum = num1 + num2alert(sum)}getSum(1, 2)</script>
</body></html>
_今日的最新消息_长沙官网seo收费标准)
