对象-随机生成数、随机点名、页面渲染、猜数字游戏

最新推荐文章于 2024-05-05 10:23:56 发布

自动花钱机

最新推荐文章于 2024-05-05 10:23:56 发布

阅读量545

点赞数

分类专栏： JavaScript 文章标签：游戏 javascript 前端 vscode html5

本文链接：https://blog.csdn.net/hs_2017112123/article/details/128241143

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、对象使用

1. 对象声明语法

let 对象名 = {}

2. 对象由属性和方法组成

let 对象名 = {
    属性名: 属性值,
    方法名: 函数
}

3. 属性

let goods = {
    name: '小米',
    num: '10012816024',
    weight: '0.55kg',
    address: '中国大陆'
}

4. 属性访问

        let person = {
            uname: '小米',
            age: 23,
            sex: '女',
        }
        // 1. 对象.属性名
        console.log(person.uname)
        console.log(person.age)
        // 2. 对象['属性名']
        console.log(person['uname'])
        console.log(person['age'])

5. 对象中的方法

        let person = {
            uname: '小米',
            // 方法名：function(){}
            sayHi: function() {
                console.log('hi~~~')
            }
        }
        // 调用方法 对象.方法名()
        person.sayHi()

二、操作对象

增删改查

        let obj = {
            uname: '小明',
            age: 18
        }
        // 修改  对象.属性 = 新值
        obj.age = 21
        // 新增一个属性
        obj.sex = '女'
		// 新增一个方法
        obj.sing = function() {
            console.log('hi')
        }
        console.log(obj)        
		// 删除
        delete obj.uname

三、遍历对象

对象没有像数组一样的length属性，所以无法确定长度

对象里面是无序的键值对，没有规律。不像数组里面有规律的下标

        let obj = {
            uname: '小盒',
            age: '21',
            sex: '女'
        }
        // for in 循环语句
        // for (let k in 对象) {}
        // k 变量
        for (let k in obj) {
            console.log(k)   //打印属性名
            console.log(obj.k)  //obj.k 意思是obj里面的k属性
            console.log(obj[k])  //打印属性值
        }

渲染出一个学生信息表

<!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>
        table {
            width: 600px;
            text-align: center;
        }
        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        caption {
            margin-bottom: 10px;
            font-size: 18px;
            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>
    <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: 17, gender: '男', hometown: '山西省'},
            {name: '小金', age: 18, gender: '女', hometown: '浙江省'}
        ]
        // 1. 打印表格的头部和尾部
        document.write(`
            <table>
            <caption>学生列表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        `)
        // 2. 中间遍历行数
        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>
        `)
    </script>
</body>
</html>

四、内置对象

document.write()

console.log()

内置对象Math

提供了一系列做数学运算的方法

random：返回一个浮点数，伪随机数在范围从0 到小于1，包括 0不包括 1
ceil：向上取整
floor：向下取整
round：就近取整，.5往大取值
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值

        console.log(Math.PI)         // 圆周率
        console.log(Math.random())   // 随机数
        // ceil  向上取整
        console.log(Math.ceil(1.1))  // ceil  2
        console.log(Math.ceil(1.5))  // ceil  2
        console.log(Math.ceil(1.9))  // ceil  2
        // floor  向下取整
        console.log(Math.floor(1.1)) // floor 1
        console.log(Math.floor(1.5)) // floor 1
        console.log(Math.floor(1.9)) // floor 1
        // round  就近取整，.5往大取值
        console.log(Math.round(1.1)) // round 1
        console.log(Math.round(1.5)) // round 2
        console.log(Math.round(1.9)) // round 2

        console.log(Math.round(-1.1))// round -1
        console.log(Math.round(-1.5))// round -1
        console.log(Math.round(-1.9))// round -2

        // 最大值和最小值
        console.log(Math.max(1, 5, 9, 10))
        console.log(Math.min(1, 5, 9, 10))

生成任意范围随机数

如何生成N-M之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let random = getRandom(1, 10)

随机点名：随机显示一个名字到页面中，且不允许重复显示

        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let arr = ['霓裳','木兮','倾城','墨锦','桃花','茯苓','木槿','迷雾','仙柒','挽风','薰池','白昼','薰池','词曲','柚茶','予遥','薄年','文浅','拾心','淡忘','慕然','暮柔','千城','顾玖','星河','南尘','北宸','心音','安笙','落苑','不眠','余味','Nitia','執筆','遠客','慾朢','璎埖','Golven','Agonie','Renaitre','Farewell','Fickle']
        // 生成一个随机数
        let random = getRandom(0, arr.length - 1)
        document.write(arr[random])
        // 显示过后删除这个名字
        // arr.splice(起始位置, 删除几个元素)
        arr.splice(random, 1)

猜数字游戏

        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 生成1-10之间的随机数
        let random = getRandom(1, 10)
        // 用户输入 不断弹框，知道输入正确为止
        while(true) {
            let num = +prompt('请你输入一个数字：')
            // 如果大于该数字，就提示，数字猜大了，继续猜
            // 如果小于该数字，就提示，数字猜小了，继续猜
            // 如果猜对了，就提示猜对了，程序结束
            if (num > random) {
                alert('数字猜大了，请继续')
            } else if (num < random) {
                alert('数字猜小了，请继续')
            } else {
                alert('猜对了，程序结束！')
                break
            }         
        }

五、综合案例

<!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>学成在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 4. box核心内容区域开始 -->
    <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>
</html>

六、拓展

1. 术语解释

术语	解释	举例
关键字	在JavaScript中有特殊意义的词汇	`let、var、function、if、else、switch、case、break`
保留字	在目前的JavaScript中没意义，但未来可能会具有特殊意义的词汇	`int、short、long、char`
标识（标识符）	变量名、函数名的另一种叫法	无
表达式	能产生值的代码，一般配合运算符出现	`10 + 3、age >= 18`
语句	一句代码也称之为一条语句，一般按用途还会分类：输出语句、声明语句、分支语句	无

2. 基本数据类型和引用数据类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型，string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型，通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

引用数据类型存放到堆里面