javaScript day05 对象

Dawn云烟
97 阅读2分钟

对象的使用

let 对象名 = {

}

对象操作：增删改查

let person = {
            name: '李狗蛋',
            age: 18
        }

        // 查：直接对象.属性即可
        console.log(person.name);
        console.log(person['age']);


        // 增： 对象.属性 = 值   如果对象中没有设置的属性则会新增一个属性
        person.ss = '哈哈'
        console.log(person.ss);

        // 增： 对象.方法 = 匿名函数 也可以动态为对象 添加方法，语法更加灵活b vc`
        person.saHyi = function () {
            console.log('大家好');
        }
        console.log(person);
        person.saHyi()

        // 改： 对象.属性 = 值   如果对象中有对应的属性则会更新属性值
        person.name = '张翠花'
        console.log(person);

        // 删： delete 对象.属性
        delete person.name
        console.log(person);

怎么得到数组中的一个数

 // 数组对象
        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].name);

数学内置对象：随机数对象

  // 0 - 5的随机数 + 5
        // 5 - 10的随机数

        console.log(Math.floor(Math.random() * 6));
        console.log(Math.floor(Math.random() * 5) + 6);
        // Math.ceil() 向上取整

        console.log(Math.ceil(1.1));
        // Math.floor() 向下取整

        console.log(Math.floor(1.5));
        // Math.max() 求最大值

        console.log(Math.max(1, 2, 3, 4, 5, 6, 7, 8));
        // Math.min() 求最小值

        console.log(Math.min(1, 2, 3, 4, 5, 6, 7, 8));

随机点名：不重复

  // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']

        // 生成1个随机数 作为数组的索引号
        let random = getRandom(0, arr.length - 1)
        // console.log(random)
        document.write(arr[random])

        // 之后删除这个 人的名字
        // arr.splice(从哪里开始删， 删几个)
        arr.splice(random, 1)
        console.log(arr);

案列

NO.1用JS对象创建表格

image.png

 document.write(`
        <table>
        <caption>
            <h3>学生列表</h3>
        </caption>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>家乡</th>
        </tr>
        `)
        // 定义一个存储了若干学生信息的数组
        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: '广东省' }
        ]
        console.log(students[0].name);

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

        for (let i = 0; i <= students.length; i++) {
            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(`</table>`)

NO.2 弹窗猜数字游戏

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

        let res = getRandom(1, 10)

        // 声明变量 如果是错的 就继续执行循环
        let isWrong = true
        while (isWrong) {
            let num = +prompt('输入数字')

        //输入的值比正确的大，继续循环
            if (num > res) {
                alert('您输入的数字太大')
            } else if (num < res) {
        //输入的值比正确的小，继续循环
                alert('您输入的数字太小了')
            } else if (num === res) {
                alert('您猜对了')
                //输入数字正确就退出循环 break
                break
            }
        }

NO.3 学成小卡片

image.png

<body>
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <script>
                    let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网络动态图片加载实战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2 大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'Android APP 实战项目演练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: 'UGUI 源码深度分析案例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从入门到精通实战案例',
                            num: 888
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        }
                    ]
                    for (let i = 0; i < data.length; i++) {
                        document.write(`<li>
                    <img src=${data[i].src} alt="">
                    <h4>
                        ${data[i].title}
                    </h4>
                    <div class="info">
                        <span>高级</span> • <span>${data[i].num}</span>人在学习
                    </div>
                </li>`)
                    }

                </script>


            </ul>
        </div>
    </div>

</body>

随机数 设定次数

猜数字游戏（0 - 20），设定次数，最多猜8次

        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明范围
        let res = getRandom(0, 20)

        // 声明变量 如果是错的 就继续执行循环
        let isWrong = true
        for (let i = 0; i < 8; i++) {
            let num = +prompt('输入数字')

            //输入的值比正确的大，继续循环
            if (num > res) {
                alert('您输入的数字太大')
            } else if (num < res) {
                //输入的值比正确的小，继续循环
                alert('您输入的数字太小了')
            } else if (num === res) {
                alert('您猜对了')
                //输入数字正确就退出循环 break
                break
            }
        }
avatar
文章
阅读
粉丝