当前位置: 首页 > news >正文

【JavaScript】九、JS基础练习

文章目录

  • 1、练习:对象数组的遍历
  • 2、练习:猜数字
  • 3、练习:生成随机颜色

1、练习:对象数组的遍历

需求:定义多个对象,存数组,遍历数据渲染生成表格

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++) {
  for (let key in students[i]) {
    console.log(students[i][key])	// 拿到每个对象后,for in遍历对象
  }
}

一般来说,目前没有学dom操作,打印下面这个表格,都是先写出死的html,再把html分块剪切到script标签中,使用document.write来输出html标签

在这里插入图片描述
静态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>
        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>
        <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>
        <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>
    </table>

</body>

</html>

结合JS:

<body>
  <h2>学生列表</h2>
  <table>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>
    <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++) {
        // 拿到每一个对象
        let student = students[i]
        document.write(`
            <tr>
              <td>${i + 1}</td>
        `)
        // 遍历对象的每个属性
        for (let key in student) {
          document.write(`
            <td>${student[key]}</td>       
        `)
        }
        // 一行数据写完了,打印结束标签
        document.write(`</tr>`)

      }
    </script>
  </table>

</body>

但这里想复杂了,没必要普通for套一个for in,直接一层for循环:

<!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>
        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写这儿 -->
        <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++) {
                // 模板字符串+document.write输出标签
                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>
                `)
            }
            document.write
        </script>

    </table>


</body>

</html>

这里本质是遍历数组 + 获取对象的属性值,那么查对象的两种语法都可以用,不必硬套for in

2、练习:猜数字

需求:程序随机生成 1~10 之间的一个数字,用户输入一个数字

  • 如果大于该数字,就提示,数字猜大了,继续猜
  • 如果小于该数字,就提示,数字猜小了,继续猜
  • 如果猜对了,就提示猜对了,程序结束
<body>
  <script>
    function guessNum(num = 0) {
      let random = Math.floor(Math.random() * 10 + 1)
      console.log(random)
      let count = 1
      // 或者while (true)
      for (; ;) {
        if (count >= 4) {
          alert(`超过四次没猜对了,答案是${random}`)
          break
        }
        if (num === random) {
          alert('猜对了~')
          break
        } else if (num > random) {
          alert('猜大了!')
          count++
          num = +prompt('请重新输入一个数字')
        } else if (num < random) {
          alert('猜小了!')
          count++
          num = +prompt('请重新输入一个数字')
        }
      }
    }

    let num = +prompt('请输入一个数字')
    guessNum(num)

  </script>
</body>

3、练习:生成随机颜色

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

  • 提示: 16进制颜色格式为: #ffffff, 其中f可以是任意 0-f之间的字符,需要用到数组,
    let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
  • 提示: rgb颜色格式为: rgb(255,255,255) ,其中255可以是任意0-255之间的数字
<body>
  <script>
    // 随机颜色
    function getRandomColor(format = true) {
      let result = ''
      if (!format) {
        // 返回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)
        result = `rbg(${r},${g},${b})`
      } else {
        result = '#'
        let array = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
        for (let i = 1; i <= 6; i++) {
          let random = Math.floor(Math.random() * array.length)
          result = result + array[random]
        }
      }
      return result;

    }
    document.write(getRandomColor(true))
  </script>
</body>

VsCode中,Alt + ⬇️ 或者option + ⬇️,把一行代码直接向下移动,不用剪切后复制

http://www.dtcms.com/a/98485.html

相关文章:

  • torch.tensor 用法
  • OpenAI API - 快速入门开发
  • 链表(C++)
  • WPF 自定义行为AssociatedObject详解
  • 全包圆玛奇朵样板间亮相,极简咖啡风引领家装新潮流
  • 程序化广告行业(39/89):广告投放的数据分析与优化秘籍
  • 腾讯系AI应用,可以生视频,3D模型...
  • 北森测评的经验
  • 二层框架组合实验
  • linux压缩指令
  • 数据结构与算法:算法分析
  • 轮询和长轮询
  • html5基于Canvas的动态时钟实现详解
  • 论文内可解释性分析
  • 《ZooKeeper Zab协议深度剖析:构建高可用分布式系统的基石》
  • 0101-vite创建react_ts-环境准备-仿低代码平台项目
  • latex笔记
  • 复现文献中的三维重建图像生成,包括训练、推理和可视化
  • StarRocks 存算分离在京东物流的落地实践
  • GOC L2 第四课模运算和周期
  • 软件工程之需求工程(需求获取、分析、验证)
  • Unity顶点优化:UV Splits与Smoothing Splits消除技巧
  • 基于 Python 深度学习 lstm 算法的电影评论情感分析可视化系统(2.0 系统全新升级,已获高分通过)
  • CUDA专题3:为什么GPU能改变计算?深度剖析架构、CUDA®与可扩展编程
  • 软件信息安全性测试工具有哪些?安全性测试报告如何获取?
  • C++ 类型转换
  • java基础以及内存图
  • presto任务优化参数
  • RAG、大模型与智能体的关系
  • Binlog、Redo log、Undo log的区别