亲爱的老师，我来交作业了，麻烦您帮我检查一下呢！⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

来源：4-5 编程练习

im镇辉

2021-06-30 16:41:30

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrap {
            width: 324px;
            margin: 0 auto;
        }
        button {
            padding: 10px 20px;
            margin-bottom: 20px;
            border: none;
            border-radius: 3px;
            background: #f01414;
            color: #fff;
        }
        #intro {
            width: 300px;
            min-height: 100px;
            line-height: 20px;
            padding: 10px;
            border: 2px solid gray;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <button>添加</button>
        <div id="intro"></div>
    </div>
    <script>
        var btn = document.querySelector('button');
        var info = document.getElementById('intro');
        // 新的参数
        const newInfo = {
            name: "功夫 ",
            year: "2004",
            director: "周星驰",
            star: "周星驰 /黄圣依",
            type: "喜剧 / 爱情 / 奇幻 / 古装",
            introduction: "1940年代的上海，自小受尽欺辱的街头混混阿星（周星驰）出人头地的故事。"
        }
        function add(newInfo) {
            // 默认参数
            const defaulInfo = {
                name: "大话西游之月光宝盒 ",
                year: "2014",
                director: "刘镇伟",
                star: "周星驰 / 吴孟达 / 罗家英",
                type: "喜剧 / 爱情 / 奇幻 / 古装",
                introduction: "　孙悟空（周星驰）护送唐三藏（罗家英）去西天取经路上的故事。"
            }
            //对象展开运算符的应用 后面覆盖前面的，以至使用新参数
            let { name, year, director, star, type, introduction } = { ...defaulInfo, ...newInfo };
            info.innerHTML = `<h3>名称：${name}</h3><p>导演：${director}</p><p>主演：${star}</p><p>类型：${type}</p><p>年份：${year}</p><p>简介：${introduction}</p>`;
        }
        // 给函数add(),传空白参
        add();
        // 点击，传参
        btn.onclick = function () {
            add(newInfo);
        }
    </script>
</body>
</html>