朱呆呆 | 个人博客

变量练习

输出姓名

需求：

浏览器中弹出对话框：请输入姓名
页面中输出：刚才输入的姓名

分析：

输入：用户输入框：prompt()
保存数据（变量）
输出：页面输出数据

// 1、提示用户输入姓名 prompt()
// 2、将用户输入的姓名保存到变量中
let uname = prompt('请输入姓名')

// 调试
// console.log(uname)

// 3、将用户输入的姓名输出到网页中document.write()
document.write(uname)

交换变量

需求：

有2个变量：cup1 里面放的是苹果汁，cup2 里面放的是橙子汁
经过处理，最后 cup1 里面放的是橙子汁，cup2 里面放的是苹果汁

分析：

思路：借助于一个空杯子
核心思路：使用一个空变量用来做临时中间存储
步骤
- 声明一个临时变量 temp
- 把 cup1 的苹果汁倒入 temp（赋值）
- 把 cup2 的橙子汁倒入 cup1 杯子里面
- 把 temp 里面的苹果汁倒入 cup2

// 有两个变量，分别存储着苹果汁和橙子汁
let cup1 = '苹果汁'
let cup2 = '橙子汁'

// 1、声明一个临时变量temp
let temp
// 2、将cup1的苹果汁倒入temp
temp = cup1
// 3、将cup2的橙子汁倒入cup1
cup1 = cup2
// 4、将temp的苹果汁倒入cup2
cup2 = temp


// 拓展：不需要临时变量，只能交换数字类型
let num1 = 88
let num2 = 76

num1 = num1 + num2  // 164
num2 = num1 - num2  // 164-76=88
num1 = num1 - num2  // 164-88=76

输出用户信息

需求：

让用户输入自己的姓名、年龄、性别、再输出到网页

分析：

弹出输入框（prompt）：请输入您的姓名（uname）：用变量保存起来
弹出输入框（prompt）：请输入您的年龄（age）：用变量保存起来
弹出输入框（prompt）：请输入您的性别（sex）：用变量保存起来
页面分别输出（document.write）刚才的 3 个变量

// 弹出输入框，让用户输入姓名/年龄/性别
let uname = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')
let sex = prompt('请输入您的性别')

// console.log(uname, age, sex)

// 将三个变量都输出到网页中
document.write(uname, age, sex)

页面输出姓名和年龄

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了

let uname = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')

document.write(`大家好，我叫${uname}，今年${age}岁了`)

// 表格形式输出
document.write(`<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>${uname}</td>
      <td>${age}</td>
    </tr>
  </tbody>
</table>`)

计算商品小计

需求：

用户输入商品价格和数量，可以计算出小计，显示到页面中

分析：

输入数据：单价 price 、数量 num
处理数据：小计 = 单价 * 数量
输出数据：把结果显示到页面中，注意字符串拼接

// 请用户输入单价和数量
let price = prompt('请输入单价')
let num = prompt('请输入数量')

// 处理数据，用单价乘数量得出小计
let total = price * num

// 输出给用户看
document.write(`小计：${total}元`)

逻辑运算符

需求：用户输入一个，判断这个数是 4 的倍数，并且不是 100 的倍数，如果是则页面弹出 true，否则弹出 false。

let num = prompt('请输入一个数字')
alert(num % 4 === 0 && num % 100 !== 0)

用户订单详情

需求：用户输入商品价格和商品数量，以及收货地址，页面显示商品订单信息表格

let price = prompt('请输入价格')
let num = prompt('请输入数量')
let address = prompt('请输入地址')
let total = price * num
document.write(`<table>
  <tr>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>商品数量</th>
    <th>总价</th>
    <th>收货地址</th>
  </tr>
  <tr>
    <td>小米青春版PLUS</td>
    <td>${price}元</td>
    <td>${num}</td>
    <td>${total}</td>
    <td>${address}</td>
  </tr>
</table>`)

分支语句

if 练习

用户输入高考成绩，如果分数大于等于 700 分，则提示“恭喜考入！”

let score = prompt('请输入高考成绩')
if (score >= 700) {
  alert('恭喜考入！')
}

判断用户登录

用户输入，用户名：呆呆，密码：416，则提示登录成功，否则提示登录失败

let uname = prompt('请输入用户名')
let password = prompt('请输入密码')
if (uname === '呆呆' && password === '416') {
  alert('登录成功！')
} else {
  alert('登录失败！')
}

多分支

成绩等级分布

let score = +prompt('请输入成绩')  // +：转成数字型
if (score >= 90) {
  alert('优秀')
} else if (score >= 70) {
  alert('良好')
} else if (score >= 60) {
  alert('及格')
} else {
  alert('不及格')
}

三元运算符

用户输入2个数，页面弹出最大的值

let num1 = prompt('请输入第一个数')
let num2 = prompt('请输入第二个数')

// 方法1
if (num1 > num2) {
  alert(num1)
} else {
  alert(num2)
}

// 方法2
num1 > num2 ? alert(num1) : alert(num2)

数字补 0

用户输入一个数字，如果小于 10 就需要在前面补零，如果大于等于 10 则不需要

let num = +prompt('请输入一个数')
num < 10 ? '0' + num : num

循环

for 练习

// 案例1：页面输出5个小星星
for (let i = 0; i < 100; i++) {
  document.write('★')
}

// 案例2：页面输出年龄（1~100岁）
for (let i = 0; i < 100; i++) {
  document.write(`今年${i + 1}岁了<br>`)
}

// 案例3：页面输出1~100的偶数
for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    document.write(`${i}<br>`)
  }
}

// 案例4：求1~100的累加和
let num = 0
for (let i = 1; i <= 100; i++) {
  sum += i
}
console.log(num)

// 案例5：求1~100的偶数和
let num = 0
for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    sum += i
  }
}
console.log(num)

ATM机 - 无限循环

用户可以选择存钱、取钱、查看余额和退出功能

// 1、无线循环提醒用户
while (true) {
  let num = prompt(`请选择你的操作：
    1.取款
    2.存款
    3.查看余额
    4.退出
  `)
  
  // 2、用户输入4退出循环
  // if和switch选择
  switch (num) {
    case 4:
      break
      break  // 这个break和switch的break重名了，所以不能使用switch
  }
  
  // 最终使用if
  if (num === 4) {
    break
  }
}

ATM机 - 存取款功能

let money = 100
while (true) {
  let num = prompt(`请选择你的操作：
    1.取款
    2.存款
    3.查看余额
    4.退出
  `)
  
  if (num === 4) {
    document.write(`欢迎下次光临，你现在的余额是${money}元`)
    break
  } else if (num === 1) {
    let qu = +prompt('请问你取存多少钱？')
    money -= qu
  } else if (num === 2) {
    let cun = +prompt('请问你想存多少钱？')
    money += cun
  } else if (num === 3) {
    alert(money)
  }
}

图片渲染

根据用户输入的个数，页面可以渲染对应的图片个数

图片渲染案例.png

html

<!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>渲染图片案例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        width: 540px;
        margin: 30px auto;
      }
      .box li {
        width: 100px;
        height: 100px;
        margin: 0 10px 10px 0;
      }
      .box li:nth-child(5n + 1) {
        margin-right: 0;
      }
      .box li img {
        width: 100%;
        height: 100%;
        border: 2px solid #258df2;
        border-radius: 10px 0 10px 0;
      }
    </style>
  </head>
  <body>
    <ul class="box">
      <script>
        let num = +prompt("请输入图片个数");
        for (let i = 1; i <= num; i++) {
          document.write(`
          <li><img src="./images/${i}.jpg" alt=""></li>
          `);
        }
      </script>
    </ul>
  </body>
</html>

打印正方形

for(let i = 0; i < 5; i++){
  for(let j = 0; j < 5; j++){
    document.write('★')
  }
  document.write('<br>')
}

// 拓展：让用户自己输入星星的行数和列数
let row = +prompt('请输入行数')
let col = +prompt('请输入列数')

for(let i = 0; i < row; i++){
  for(let j = 0; j < col; j++){
    document.write('★')
  }
  document.write('<br>')
}

打印三角形

for(let i = 0; i < 5; i++){
  for(let j = 0; j < i; j++){
    document.write('★')
  }
  document.write('<br>')
}

打印九九乘法表

// 1*1
// 1*2 2*2
// 1*3 2*3 3*3
// 右边的运算数和行数一样
// 左边的运算数和列数（每行有多少个）一样
for(let i = 1; i <= 9; i++){
  for(let j = 1; j <= i; j++){
    document.write(`<span>${j} x ${i} = ${i*j}</span>`)
  }
  document.write('<br>')
}

* span可修改样式

数组

数组求和

求数组 [2,6,1,7,4] 里面所有元素的和以及平均值

let arr = [2, 6, 1, 7, 4]

// 1、定义两个变量, sum(总和) avg(平均数)
let sum = 0
let avg = 0

// 2、循环遍历数组的每一个元素
for (let i = 0; i < arr.length; i++) {
  // 3、使用sum与每一项进行累加
  // sum = sum + arr[i]
  sum += arr[i]
}

// 4、计算平均值
avg = sum / arr.length
console.log(`总和是: ${sum}, 平均值是: ${avg}`)

数组求最大值

let arr = [4, 2, 55, 6, 20]

// 1、定义一个max变量, 假设数组中第一个元素为最大值
let max = arr[0]

// 2、遍历数组, 拿max去和每一项进行比较, 如果有比max还大的元素, 就赋值给max
for (let i = 1; i < arr.length; i++) {
  // 3、比较两者, 如果比max大就赋值给max
  if (arr[i] > max) {
    max = arr[i]
  }
}
// 打印输出
console.log(max)

数组筛选

将数组 [2,0,6,1,77,0,52,0,25,7] 中大于等于 10 的元素选出来，放入新数组中

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]

// 1、声明一个新数组
let newArr = []

// 2、遍历旧数组, 找到大于等于10的元素, 将其加入到新数组中
for (let i = 0; i < arr.length; i++) {
  if (arr[i] >= 10) {
    // 将 arr[i] 放入新数组
    newArr.push(arr[i])
  }
}

// 3、打印newArr查看结果
console.log(newArr)

数组去 0

将数组 [2,0,6,1,77,0,52,0,25,7] 筛选，形成一个不包含 0 的新数组

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]

// 1、声明一个新数组
let newArr = []

// 2、遍历数组
for (let i = 0; i < arr.length; i++) {
  // 3、判断非0的元素, 加入新数组
  if (arr[i] !== 0) {
    newArr.push(arr[i])
  }
}

// 4、打印
console.log(newArr)

手风琴案例

利用循环生成图片

手风琴案例

小技巧：利用循环拼接字符串（原理跟累加和类似）

① 声明一个空的字符串 str = ''

② 循环里面利用 += 进行拼接

③ 把拼接完毕的字符串放入容器中

html

<!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>Document</title>
  <style>
    .box {
      display: flex;
      overflow: hidden;
      width: 1120px;
      height: 260px;
      margin: 50px auto;
    }

    .box>div {
      width: 120px;
      border: 1px solid #fff;
      transition: all 0.5s;
    }

    .box>div:hover {
      width: 400px;
    }
  </style>
</head>

<body>
  <!-- <div class="box">
    <div><img src="./images/1.jpg" alt=""></div>
    <div><img src="./images/2.jpg" alt=""></div>
    <div><img src="./images/3.jpg" alt=""></div>
    <div><img src="./images/4.jpg" alt=""></div>
    <div><img src="./images/5.jpg" alt=""></div>
    <div><img src="./images/6.jpg" alt=""></div>
    <div><img src="./images/7.jpg" alt=""></div>
  </div> -->

  <script>
    let arr = [
      './images/1.jpg',
      './images/2.jpg',
      './images/3.jpg',
      './images/4.jpg',
      './images/5.jpg',
      './images/6.jpg',
      './images/7.jpg',
    ]

    // 1、声明一个空的字符串变量str 
    let str = ''

    // 2、利用for循环拼接字符串 +=
    for (let i = 0; i < arr.length; i++) {
      // console.log(arr[i])
      str += `
      <div><img src="${arr[i]}" alt=""></div>
      `
    }
    console.log(str)

    // 3、把拼接的字符串放入box盒子里面
    document.write(`
      <div class="box">
        ${str}
      </div>
    `)

  </script>
</body>

</html>

根据数据渲染柱形图效果

用户输入四个季度的数据，可以生成柱形图

柱形图

分析：

① 需要输入 4 次，所以可以把 4 个数据放到一个数组里面

声明一个空数组
利用循环，弹出 4 次框，同时把数据存到数组里面

② 遍历该数组，根据数据生成 4 个柱形图，渲染打印到页面中

声明一个空字符串 str
根据数组利用循环拼接字符串，生成多个柱子
把生成的柱子添加到 box 盒子中

html

<!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;
    }

    body {
      background-color: #0c143d;
    }

    .box {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      width: 800px;
      min-height: 300px;
      border-left: 1px solid #4b578f;
      border-bottom: 1px solid #4b578f;
      margin: 0 auto;
      padding-top: 50px;
      text-align: center;
      color: #9799ab;
    }

    .box>div {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 40px;
      height: 0;
      background: linear-gradient(#3c99ff, #4489d0, #2283e4);
      cursor: pointer;
      border-radius: 8px 8px 0 0;
      transition: all .2s;
    }

    .box>div:hover {

      animation: bg .5s alternate infinite;

    }

    @keyframes bg {
      to {
        box-shadow: 0 5px 29px rgb(53 111 226 / 88%);
        background: linear-gradient(#3c99ff, #68aff6, #2283e4);
      }
    }

    .box>div::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 2px;
      height: 10px;
      background-color: #4b578f;
      transform: translate(-50%, 100%);
    }

    .box div span {
      width: 60px;
      margin: -30px 0 -5px -6px;
    }

    .box div h4 {
      width: 70px;
      margin: 0 0 -35px -10px;
    }

    .title {
      margin-top: 50px;
      text-align: center;
      color: #9799ab;
    }
  </style>
</head>

<body>
  <h3 class="title">2099年季度销售数额（单位万）</h3>
  <!-- <div class="box">
    <div style="height: 123px;" title="第1季度-123万">
      <span>123万</span>
      <h4>第1季度</h4>
    </div>
    <div style="height: 156px;" title="第2季度-156万">
      <span>156万</span>
      <h4>第2季度</h4>
    </div>
    <div style="height: 120px;" title="第3季度-120万">
      <span>120万</span>
      <h4>第3季度</h4>
    </div>
    <div style="height: 210px;" title="第4季度-210万">
      <span>210万</span>
      <h4>第4季度</h4>
    </div>
  </div> -->
  <script>
    // 功能1： 用户输入4次，并且把数据存放到数组里面

    // 1.1 声明一个空的数组
    let arr = []

    // 1.2 利用循环的形式让用户输入4次，并且把数据追加给数组
    for (let i = 1; i <= 4; i++) {
      let num = +prompt(`请您输入第${i}季度的销售额`)
      arr.push(num)
    }
    console.log(arr)

    // 功能2：根据数组生成柱形图

    // 2.1 声明一个空的字符串 str
    let str = ''

    // 2.2 利用循环拼接字符串，生成多个柱子
    for (let i = 0; i < arr.length; i++) {
      str += `
        <div style="height: ${arr[i]}px;" title="第${i + 1}季度-${arr[i]}万">
          <span>${arr[i]}万</span>
          <h4>第${i + 1}季度</h4>
        </div>
      `
    }
    console.log(str)

    // 2.3 把生成的柱子放到box盒子里面进行渲染
    document.write(`
      <div class="box">
        ${str}
      </div> 
    `)
  </script>
</body>

</html>

函数

数组求和

function sumArray(array = []) {
  let sum = 0
  for (let i = 0; i < array.length; i++) {
    sum += array[i]
  }
  return sum
}

let arr1 = [11, 22, 66, 22]
let arr2 = [88, 322, 166, 22, 1]

// let result1 = sumArray(arr1)
// let result2 = sumArray(arr2)

document.write( sumArray(arr1) )
console.log( sumArray(arr2) )
sumArray()

查找数组元素

判断数组是否存在某个元素，如果有则返回 true，否则返回 false

function some(name, arr) {
  // console.log(name, arr)
  // 分析思路 - 假设法
  // 1、先定义一个变量, 假设没找到
  // flag：标志、标记的意思, 一般在开发中表示一个记号
  let flag = false
  // 2、遍历数组真实的找一下
  for (let i = 0; i < arr.length; i++) {
    // console.log(`我循环了第${i + 1}次`)
    // 3、如果找到了就将flag改成true
    if (name === arr[i]) {
      flag = true
      // 性能优化
      break
    }
  }
  // 4、循环结束将flag返回
  return flag
}

let arr1 = ['红毛丹', '芭乐', '人参果', '榴莲', '黑加仑']

console.log(some('人参果', arr1))
// console.log(some('橙子', arr1))

查找元素的索引

如果找到该元素（第一个元素即可），则返回该元素的索引号，否则返回 -1

function findIndex(name, arr) {
  let index = -1
  for (let i = 0; i < arr.length; i++) {
    if (name === arr[i]) {
      index = i
      break
    }
  }
  return index
}

let arr1 = ['红毛丹', '芭乐', '人参果', '榴莲', '黑加仑']
let result1 = findIndex('榴莲', arr1)
console.log(result1)
let result2 = findIndex('橙子', arr1)
console.log(result2)

转换时间

转换时间案例

html

<!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>
    .box {
      position: relative;
      width: 190px;
      height: 260px;
      color: #fff;
      background: #e83632 url(./images/bg.png) 50%/contain no-repeat;
    }

    .title {
      width: 100%;
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      padding-top: 31px;
    }

    .count {
      margin-top: 90px;
      font-size: 14px;
      text-align: center;
    }

    .timer {
      margin-left: auto;
      margin-right: auto;
      width: 130px;
      height: 30px;
      margin-top: 10px;
      display: block;
    }

    .timer span {
      position: relative;
      float: left;
      width: 30px;
      height: 30px;
      text-align: center;
      background-color: #2f3430;
      margin-right: 20px;
      color: white;
      font-size: 20px;
    }

    .timer span:nth-child(-n+2)::after {
      content: ":";
      display: block;
      position: absolute;
      right: -20px;
      font-weight: bolder;
      font-size: 18px;
      width: 20px;
      height: 100%;
      top: 0;
    }

    .timer span:last-child {
      margin-right: 0;
    }
  </style>
</head>

<body>
  <!-- <div class="box">
    <div class="title">计算时间</div>
    <div>
      <div class="count">转换为时分秒</div>
      <div class="timer">
        <span class="hour">01</span>
        <span class="minute">22</span>
        <span class="second">58</span>
      </div>
    </div>
  </div> -->
  <script>
    function getTime(t) {
      // console.log(t)
      let s = parseInt(t % 60)
      let m = parseInt(t / 60 % 60)
      let h = parseInt(t /60 / 60 % 24)

      s = s < 10 ? '0' + s : s
      m = m < 10 ? '0' + m : m
      h = h < 10 ? '0' + h : h

      return `
      <div class="box">
        <div class="title">计算时间</div>
        <div>
          <div class="count">转换为时分秒</div>
          <div class="timer">
            <span class="hour">${h}</span>
            <span class="minute">${m}</span>
            <span class="second">${s}</span>
          </div>
        </div>
      </div>
        `
    }
    // 转换时分秒案例
    // 计算公式：计算时分秒
    // 小时：  h = parseInt(总秒数 / 60 / 60 % 24)
    // 分钟：  m = parseInt(总秒数 / 60 % 60)
    // 秒数:   s = parseInt(总秒数 % 60) 
    
    // 1、使用prompt接收用户输入的总秒数
    let seconds = +prompt('请输入总秒数:')
    // 2、调用封装好的函数, 来自动计算时分秒
    let str = getTime(seconds)
    // 3、打印输出
    document.write(str)
  </script>
</body>
</html>

封装 every 函数

用于检测数组所有元素是否都满足条件。

**需求：**检测数组里面的所有元素是否都大于10，如果满足则返回 true，如果不满足则返回 false

function every(arr = []) {
  let isRight = true
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] <= 10) {
      isRight = false
      break
    }
  }
  return isRight
}
console.log(every([19, 7, 30]))  // true
console.log(every([10, 3, 30]))  // false

对象

遍历对象数组

请把下面所有数据中的家乡打印出来

let students = [
  { name: '小亚亚', age: 18, gender: '男', hometown: '河南'},
  { name: '胡昊', age: 20, gender: '男', hometown: '河北'},
  { name: '叶召威', age: 28, gender: '男', hometown: '湖北'},
  { name: '蠢沐沐', age: 8, gender: '男', hometown: '山西'},
  { name: '小棕熊', age: 38, gender: '男', hometown: '陕西'},
]

for (let i = 0; i < students.length; i++) {
  console.log(students[i].name)
  console.log(students[i].hometown)
}

渲染表格

渲染学生信息表格

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>
    h2,
    p {
      text-align: center;
    }

    .student {
      overflow: hidden;
      margin: 0 auto;
      /* 合并相邻边框 */
      border-collapse: collapse;
      text-align: center;
      border-radius: 10px 10px 0 0;

    }

    .student tr {
      cursor: pointer;
    }

    .student th {
      padding: 5px 50px;
      color: #fff;
    }

    .student,
    th,
    td {
      border: 1px solid #fff;
      line-height: 45px;
    }

    /* 给行添加渐变背景颜色 */
    .student thead tr {
      background-image: linear-gradient(to right, #f46e33, #f057a5);
    }

    /* 从第2行开始修改背景颜色 */
    .student tbody tr {
      background-image: linear-gradient(to right, #fdf0eb, #fdeff6);
    }

    /* 从第2行开始 最后一个单元格颜色变化 */
    .student tbody tr :last-child {
      color: #f282bb;
    }

    /* 第一行鼠标经过不要变颜色 */
    .student tbody tr:hover {
      background-image: linear-gradient(to right, #f9e3da, #f9d6e8);

    }
  </style>
</head>

<body>
  <h2>学生信息</h2>
  <p>将数组中存储的学生信息，以表格的形式把数据渲染到页面中...</p>

  <!-- <table class="student">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>家乡</th>
      </tr>
    </thead>
    <tbody>
      <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>
    </tbody>
  </table> -->
  <script>
    let students = [
      { name: '小亚亚', age: 18, gender: '男', hometown: '河南'},
      { name: '胡昊', age: 20, gender: '男', hometown: '河北'},
      { name: '叶召威', age: 28, gender: '男', hometown: '湖北'},
      { name: '蠢沐沐', age: 8, gender: '男', hometown: '山西'},
      { name: '小棕熊', age: 38, gender: '男', hometown: '陕西'},
    ]

    // 0、准备一个空字符串, 用于后续的拼接操作
    let str = ''
    // 1、循环遍历数组, 取出每一个对象
    for (let i = 0; i < students.length; i++) {
      // console.log(students[i])
      str += `
      <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>
      `
    }
    // console.log(str)
    
    // 2、将拼接好的字符串输出到网页
    document.write(`
    <table class="student">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>家乡</th>
        </tr>
      </thead>
      <tbody>
        ${str}
      </tbody>
    </table>`)
  </script>
</body>
</html>

随机点名

let names = ['呆呆', '拢龙', '朱朱', '小况', '小呆', '哈哈', '嘿嘿']

// 生成一个随机数:0 ~ 6之间
// console.log( Math.floor(Math.random() * names.length) )
let random = Math.floor(Math.random() * names.length)

// names[随机数]
console.log(names[random])

猜数字

// 1、生成一个随机数1 ~ 10之间的整数
let random = Math.floor(Math.random() * 10) + 1
// console.log(random)

// 2、无限循环让用户猜, 直到猜对了才停止循环
while (true) {
  let num = +prompt('请您猜一个数字:')
  if (num < random) {
    alert('猜小了, 继续猜!')
  } else if (num > random) {
    alert('猜大了, 继续猜!')
  } else {
    alert('恭喜您, 猜对了!')

    // 退出循环
    break
  }
}

生成随机颜色

该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是 rgb 格式

// 0 - 9  A - F
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
    // 需求: 生成随机颜色, 传入true返回十六进制, 传入false返回rgb格式

    // 目标1: 定义函数, 传入true或不传参数则返回#0094FF, 传入false就返回 rgb(255,235,233)
    // 1、定义函数isHex是否需要16进制
function randomColor(isHex = true) {
  // 目标2: 生成随机的 16 进制的字符串
  if (isHex) {
    // 定义一个str准备拼接
    let str = ''
    // 去 arr 中随机取一个字符
    for (let i = 1; i <= 6; i++) {
      let index = Math.floor(Math.random() * arr.length)
      // console.log(arr[index])
      str += arr[index]
    }
    return '#' + str
  } else {
    // 目标3: 随机生成rgb的字符串
    // 0 ~ 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})`
  }
}

console.log(randomColor())
console.log(randomColor(true))
console.log(randomColor(false))

内置构造函数

全选反选

点击全选，则下面小复选框自动全部勾选

小复选框全部勾选，则全选会自动勾选

html

<body>
  <table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>
  <script>
    // 需求1: 全选框勾选或取消勾选时, 小选框全部跟随
    // 1.1 找到全选框绑定点击事件
    // change: 状态改变事件
    const cks = document.querySelectorAll('.ck')
    const checkAll = document.querySelector('#checkAll')
    checkAll.addEventListener('change', function() {
      // console.log(this.checked)
      
      // 1.2 当全选框被点击时, 设置所有小选框的勾选状态
      // if (this.checked) {
      //   cks.forEach(item => item.checked = true)
      // } else {
      //   cks.forEach(item => item.checked = false)
      // }
      cks.forEach(item => item.checked = this.checked)
    })

    
    // 需求2: 小选框全部选中时全选框勾选, 只要有一个小选框没有选中, 全选框不勾选
    // 2.1 给所有的小选框注册点击事件
    cks.forEach(ck => {
      ck.addEventListener('change', function() {
        // 2.2 点击后再判断所有小选框是否都勾选了
        // console.log('我被改了', this.checked)
        
        // every()
        // console.log(cks)  伪数组不能使用数组的方法
        
        // 把伪数组转成真数组：静态方法 Array.from()
        // console.log(Array.from(cks))
        
        // const result = Array.from(cks).every(item => item.checked === true)
        // console.log(result)
        
        checkAll.checked = Array.from(cks).every(item => item.checked)
      })
    })
  </script>
</body>

字符串翻转

请把“传智播客”四个字翻转为“客播智传”

let str = '传智播客'
console.log(str.split('').reverse().join(''))

显示赠品练习

html

<body>
  <ul>
    <!-- <li>【赠品】50g茶叶</li>
    <li>【赠品】清洗球</li> -->
  </ul>
  <script>
    const gift = '50g茶叶,清洗球'
    
    // 1、将字符串进行切割
    // const arr = gift.split(',')
    // console.log(arr)
    
    // 2、使用 map + join 进行渲染
    document.querySelector('ul').innerHTML = gift.split(',').map(item => `<li>【赠品】${item}</li>`).join('')
  </script>
</body>

原型

给数组扩展方法

给数组扩展求最大值方法和求和方法

const arr1 = [1, 2, 3]
const arr2 = [10, 20, 30]

Array.prototype.max = function() {
  // ... 展开运算符
  return Math.max(...this)
}

Array.prototype.sum = function() {
  return this.reduce((prev, item) => prev + item, 0)
}

console.log(arr1.max())
console.log(arr2.max())
console.log(arr1.sum())
console.log(arr2.sum())

模态框封装

需求：

练习面向对象写插件（模态框）

分析：

多个模态框一样的，而且每次点击都会出来一个，怎么做呢？
构造函数。把模态框封装一个构造函数 Modal，每次 new 都会产出一个模态框，所以点击不同的按钮就是在做 new 模态框，实例化。
模态框有什么功能呢？
打开功能（显示），关闭功能，而且每个模态框都包含着2个功能
- open功能
- close功能
- 问：open 和 close 方法写到哪里？
  构造函数Modal的原型对象上，共享方法

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>面向对象封装消息提示插件</title>
  <style>
    .modal {
      width: 300px;
      min-height: 100px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      position: fixed;
      z-index: 999;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      background-color: #fff;
    }

    .modal .header {
      line-height: 40px;
      padding: 0 10px;
      position: relative;
      font-size: 20px;
    }

    .modal .header i {
      font-style: normal;
      color: #999;
      position: absolute;
      right: 15px;
      top: -2px;
      cursor: pointer;
    }

    .modal .body {
      text-align: center;
      padding: 10px;
    }

    .modal .footer {
      display: flex;
      justify-content: flex-end;
      padding: 10px;
    }

    .modal .footer a {
      padding: 3px 8px;
      background: #ccc;
      text-decoration: none;
      color: #fff;
      border-radius: 2px;
      margin-right: 10px;
      font-size: 14px;
    }

    .modal .footer a.submit {
      background-color: #369;
    }
  </style>
</head>

<body>
  <button id="delete">删除</button>
  <button id="login">登录</button>

  <!-- <div class="modal">
    <div class="header">温馨提示 <i>x</i></div>
    <div class="body">您没有删除权限操作</div>
  </div> -->
  <script>
    // 需求1: 封装 Modal 构造函数
    function Modal(title = '', msg = '') {
      // 1.1 创建 div (不着急添加到网页中)
      // 最终一定是要添加到网页中的, 也就是在 open 时要添加, 所以需要把 div 存到实例对象上
      this.modalBox = document.createElement('div')
      // 1.2 添加 modal 类名
      this.modalBox.classList.add('modal')
      // 1.3 将内部结构渲染到 div 中
      this.modalBox.innerHTML = `
        <div class="header">${title} <i>x</i></div>
        <div class="body">${msg}</div>
      `
      // console.log(this.modalBox)
    }

    // 需求2: 实现 open 方法
    // 2.1 在 Modal 的原型对象中添加 open 方法
    Modal.prototype.open = function() {
      // 删除现有的 modal
      const box = document.querySelector('.modal')
      box && box.remove()
      // 将 div 渲染到 body 中
      // console.log(this.modalBox)
      document.body.append(this.modalBox)
      // 需求3: 实现关闭功能
      // 关闭功能必须在打开后才能绑定事件, 否则没有元素
      // 3.1 在 open 方法中, 找到当前模态框的 i 标签
      // 3.2 绑定点击事件
      // 3.3 移除 modal 自身
      this.modalBox.querySelector('i').addEventListener('click', () => {
        this.modalBox.remove()
      })
    }

    // 2.2 当用户点击删除按钮时创建 Modal 模态框, 调用 open 方法打开模态框
    document.querySelector('#delete').addEventListener('click', function() {
      const del = new Modal('温馨提示', '您没有删除权限操作')
      del.open()
    })

    document.querySelector('#login').addEventListener('click', function() {
      const login = new Modal('友情提示', '您的余额不足')
      login.open()
    })
    
  </script>
</body>

</html>

变量练习 ​

输出姓名 ​

交换变量 ​

输出用户信息 ​

页面输出姓名和年龄 ​

计算商品小计 ​

逻辑运算符 ​

用户订单详情 ​

分支语句 ​

if 练习 ​

判断用户登录 ​

多分支 ​

三元运算符 ​

数字补 0 ​

循环 ​

for 练习 ​

ATM机 - 无限循环 ​

ATM机 - 存取款功能 ​

图片渲染 ​

打印正方形 ​

打印三角形 ​

打印九九乘法表 ​

数组 ​

数组求和 ​

数组求最大值 ​

数组筛选 ​

数组去 0 ​

手风琴案例 ​

根据数据渲染柱形图效果 ​

函数 ​

数组求和 ​

查找数组元素 ​

查找元素的索引 ​

转换时间 ​

封装 every 函数 ​

对象 ​

遍历对象数组 ​

渲染表格 ​

随机点名 ​

猜数字 ​

生成随机颜色 ​

内置构造函数 ​

全选反选 ​

字符串翻转 ​

显示赠品练习 ​

原型 ​

给数组扩展方法 ​

模态框封装 ​

变量练习

输出姓名

交换变量

输出用户信息

页面输出姓名和年龄

计算商品小计

逻辑运算符

用户订单详情

分支语句

if 练习

判断用户登录

多分支

三元运算符

数字补 0

循环

for 练习

ATM机 - 无限循环

ATM机 - 存取款功能

图片渲染

打印正方形

打印三角形

打印九九乘法表

数组

数组求和

数组求最大值

数组筛选

数组去 0

手风琴案例

根据数据渲染柱形图效果

函数

数组求和

查找数组元素

查找元素的索引

转换时间

封装 every 函数

对象

遍历对象数组

渲染表格

随机点名

猜数字

生成随机颜色

内置构造函数

全选反选

字符串翻转

显示赠品练习

原型

给数组扩展方法

模态框封装