js基础-练习五

点名: 每次刷新网页运行, 在控制台随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = ["老赵", "老李", "小传", "小黑"]
        let random = Math.floor(Math.random() * arr.length)
        document.write(arr[random])
        arr.splice(random, 1)
        console.log(arr);
    </script>
</body>

</html>

声明对象

目的: 复习对象的声明

要求:

1. 声明一个变量per, 类型为对象类型
2. 该对象的属性为性别,年龄,爱好(3个)
3. 该对象的方法有说话, 吃饭(2个)
4. 在控制台分别调用该对象的属性和方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let per = {
            gender: '女',
            age: 23,
            hobby: 'rap',
            speak: function () {
                document.write(`speak方法被调用了--- <br>`)
            },
            eat: function () {
                document.write(`eat方法被调用了---<br>`)
            }
        }
        document.write(`性别:${per.gender}<br>`)
        document.write(`年龄:${per.age}<br>`)
        document.write(`爱好:${per.hobby}<br>`)
        per.speak()
        per.eat()
    </script>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function random(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let num = random(0, 20)
        let flag = true
        for (let i = 0; i < 8; i++) {
            let userNum = +prompt('请输入您要猜的数字')
            if (userNum > num) {
                alert('您猜的数字大了')
            } else if (userNum < num) {
                alert('您猜的数字小了')
            } else {
                flag = false
                alert('恭喜您猜对啦！')
                break
            }
        }
        if (flag) {
            alert('您已用完了所以机会')
        }
    </script>
</body>

</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>
        div {
            color: rgb(red, green, blue);
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        function getRandomColor(flag = true) {
            if (flag) {
                let str = '#'
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'a', 'b', 'c', 'd', 'e', 'f']
                for (let i = 0; i < 6; i++) {
                    let random = Math.floor(Math.random() * arr.length)
                    str += arr[random]
                }
                return str
            } else {
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return `rgb(${r},${g},${b})`
            }
        }
        console.log(getRandomColor(false))
        console.log(getRandomColor(true))
        console.log(getRandomColor())
    </script>
</body>

</html>

利用对象数组渲染英雄列表案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渲染英雄列表案例</title>
    <link rel="stylesheet" href="./拓展作业/英雄列表案例/css/hero.css">
</head>

<body>
    <script>
        let datas = [
            { name: '司马懿', imgSrc: '01.jpg' },
            { name: '女娲', imgSrc: '02.jpg' },
            { name: '百里守约', imgSrc: '03.jpg' },
            { name: '亚瑟', imgSrc: '04.jpg' },
            { name: '虞姬', imgSrc: '05.jpg' },
            { name: '张良', imgSrc: '06.jpg' },
            { name: '安其拉', imgSrc: '07.jpg' },
            { name: '李白', imgSrc: '08.jpg' },
            { name: '阿珂', imgSrc: '09.jpg' },
            { name: '墨子', imgSrc: '10.jpg' },
            { name: '鲁班', imgSrc: '11.jpg' },
            { name: '嬴政', imgSrc: '12.jpg' },
            { name: '孙膑', imgSrc: '13.jpg' },
            { name: '周瑜', imgSrc: '14.jpg' },
            { name: 'XXX', imgSrc: '15.jpg' },
            { name: 'XXX', imgSrc: '16.jpg' },
            { name: 'XXX', imgSrc: '17.jpg' },
            { name: 'XXX', imgSrc: '18.jpg' },
            { name: 'XXX', imgSrc: '19.jpg' },
            { name: 'XXX', imgSrc: '20.jpg' }
        ]
        let str = ''
        for (i = 0; i < datas.length; i++) {
            str += ` <li><img src="./拓展作业/英雄列表案例/uploads/heros/${datas[i].imgSrc}" title="${datas[i].name}"></li>`
        }
        document.write(`
    <ul class="list">
        ${str}
    </ul>
        `)
    </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">
    <link rel="stylesheet" href="./拓展作业/成绩表案例/styles/index.css">
    <title>成绩单</title>
</head>

<body>
    <script>
        const data = [
            { subject: '语文', score: 46 },
            { subject: '数学', score: 80 },
            { subject: '英语', score: 100 }
        ]
        let tr = ''
        let total = 0
        for (let i = 0; i < data.length; i++) {
            tr += `
             <tr>
            <td>${i + 1}</td>
            <td>${data[i].subject}</td>
            <td>${data[i].score}</td>
            <td><a href="#">删除</a></td>
            </tr>`
            total += data[i].score
        }
        document.write(`
    <div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            ${tr}
          </tbody>
          <tbody>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分：${total}</span>
                <span style="margin-left: 50px">平均分：${Math.ceil(total / data.length)}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>

    </div>
    `)
    </script>
</body>

</html>

猜你喜欢