JS对象案例

ydn
103 阅读1分钟

得到数组对象里面的值

        // 数组对象
        let students = [
            { name: '李狗蛋', age: 18, gender: '男', hometown: '广东省' },
            { name: '张翠花', age: 19, gender: '女', hometown: '四川省' },
            { name: '赵铁柱', age: 17, gender: '男', hometown: '广西省' },
            { name: '钱多多', age: 18, gender: '女', hometown: '湖南省' }
        ]
        // 怎么得到李狗蛋这个名字
        console.log(students[0].gender);

学生信息表案例

<!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;
            margin: 0 auto;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ccc;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:first-child {
            background-color: #ddd;
        }

        table tr:not(:first-child):hover {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <!-- <table>
        <caption>
            <h3>学生列表</h3>
        </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> -->

    <script>
        // 定义一个存储了若干学生信息的数组
        let students = [
            { name: '李狗蛋', age: 18, gender: '男', hometown: '广东省' },
            { name: '张翠花', age: 19, gender: '女', hometown: '四川省' },
            { name: '赵铁柱', age: 17, gender: '男', hometown: '广西省' },
            { name: '钱多多', age: 18, gender: '女', hometown: '湖南省' },
            { name: '松松老师', age: 18, gender: '女', hometown: '黑龙江省' },
            { name: '班班', age: 18, gender: '女', hometown: '广东省' },
            { name: '仙女兔', age: 20, gender: '女', hometown: '月宫' }
        ]

        // 通过js的方式创建表格

        // 1. 通过JS先把表头不动的部分先渲染加载出来
        document.write(`
            <table>
                <caption>
                    <h3>学生列表</h3>
                </caption>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>家乡</th>
                </tr>
        `)

        // 2. 根据后台传回的数据 进行遍历动态的追加到页面中

        // 遍历数组需要使用for循环 fa
        for (let i = 0; i < students.length; i++) {
            // students[i] 数组当中的每一项
            // console.log(i, students[i])

            // 想访问 数组中每一项的姓名
            // console.log(students[i].name)

            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>
            `)
        }



        // 3. 把table的结束标签也要渲染在页面上

        document.write(` </table>`)

    </script>
</body>

</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>
</head>

<body>
    <script>
        // 封装随机数函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        // 生成1个随机数 作为数组的索引号并 输出索引对应元素
        let num = getRandom(0, arr.length - 1)
        document.write(arr[num])

    </script>
</body>

</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>
</head>

<body>
    <script>
        // 封装随机数函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        // 生成1个随机数 作为数组的索引号并 输出索引对应元素
        let num = getRandom(0, arr.length - 1)
        document.write(arr[num])

    </script>
</body>

</html>

猜数字游戏，设定次数，最多猜8次

    // 封装随机数函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        // 1. 生成一个随机数字
        let num = getRandom(0, 20)
        // 2. 在循环外 立一个状态，用户是否是输入错误的值 
        let isWrong = true
        for (let i = 0; i < 8; i++) {
            let userNum = prompt('请输入数字')
            if (userNum > num) {
                alert('太大啦，再来')
            } else if (userNum < num) {
                alert('太小了，再来')
            } else {
                // 当用户猜对了，将循环外的isWrong置为false
                isWrong = false
                alert('您可太聪明啦')
                // 猜对了还需要跳出循环，无需再次进入
                break
            }
        }
        // 如果在8次循环用户还是输入了一个错误的值
        if (isWrong) {
            // 则嘲笑他
            alert('你可真是个小笨蛋')
        }
avatar
文章
阅读
粉丝