JavaScript基础-对象-声明一个产品对象、遍历数组对象、渲染数据到表格中、随机数、随机点名、猜数字案例

Q _Q

于 2023-07-03 23:58:52 发布

阅读量355

点赞数 1

分类专栏： JavaScript基础文章标签： javascript html css css3 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131368956

版权

JavaScript基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!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>
        // 要求：
        //     对象是一个产品信息可以命名为： goods
        //     商品名称命名为： name
        //     商品编号： num
        //     商品毛重： weight
        //     商品产地： address

        let goods = {
            name:'小米10青春版',
            num:'100016810024',
            weight:0.55,
            address:'中国大陆'
        }
        console.log(goods)
    </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>
        // 需求：请把下面数据中的对象打印出来：

            // 定义一个存储了若干学生信息的数组
            // let students = [
            //     { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            //     { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            //     { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            //     { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
            // ]
        let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
            ]
        for(let k in students){
            console.log(students[k])
            for(let j in students[k]){
                console.log(j)
                console.log(students[k][j])
            }
        }
    </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>
    <style>
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        document.write(`
        <table border="1" width="600">
            <caption><h3>学生列表</h3></caption>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>家乡</th>
                </tr>
            </thead>
            <tbody>
            `)
        
        let students = [
                { name: '小明', age: 18, gender: '男', hometown: '河北省' },
                { name: '小红', age: 19, gender: '女', hometown: '河南省' },
                { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
                { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
            ]
        
        for(let index = 0; index < students.length; index++){
            let stu = students[index]
            document.write(`
                <tr>
                    <td>${index + 1}</td>
                    <td>${stu.name}</td>
                    <td>${stu.age}</td>
                    <td>${stu.gender}</td>
                    <td>${stu.hometown}</td>
                </tr>
            `)
        }

        document.write(`
            </tbody>
        </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>
        // 生成0 - 10的随机数
        // let rand1 = Math.floor(Math.random()*(10+1)) + 0
        // console.log(rand1)

        // 生成6 - 10的随机数
        // let rand2 = Math.floor(Math.random() * (4 + 1)) + 6
        // console.log(rand2)

        // 生成M - N之间的随机数
        // Math.floor(Math.random() * (N - M + 1)) + M

        function getRandom(M=1, N=10){
            return Math.floor(Math.random() * (N - M + 1)) + M
        }
        let rand3 = getRandom(11, 30)
        document.write(rand3)
    </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 = 0, max = 1){
            return Math.floor(Math.random() * (max - min + 1)) + min
        }

        let arrName = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        let rand = getRandom(0, arrName.length - 1)
        document.write(arrName[rand], '<br>')
        arrName.splice(rand, 1)
        document.write(arrName)

        
    </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>
    // 需求：程序随机生成 1~10 之间的一个数字，用户输入一个数字
    //     ①：如果大于该数字，就提示，数字猜大了，继续猜
    //     ②：如果小于该数字，就提示，数字猜小了，继续猜
    //     ③：如果猜对了，就提示猜对了，程序结束
    
    let randNumber = Math.floor(Math.random() * (9 + 1)) + 1
    let count = 3  // 5次机会  计数器

    while(randNumber){
        let guessNumber = prompt(`不包括本次，你还有${count}次机会，请输入一个数字`)
        if(randNumber < guessNumber){
            alert('数字猜大了，继续猜')
        }
        if(randNumber > guessNumber){
            alert('数字猜小了，继续猜')
        }
        if(randNumber == guessNumber){
            alert('猜对了')
            break
        }
        count--
        if(count == 0){
            alert(`你的机会已用完！`)
            break
        }
    }
    </script>
</body>
</html>