老师帮检查一下作业,看看注释理解对不对?

来源:4-5 编程练习

要每天学习的小蓝同学

2021-05-27 21:45:35

相关代码:

<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 id='btn'>添加</button>
        <div id="intro"></div>
    </div>
    <script>
        /* 默认值参考设置
          {
                name: "大话西游之月光宝盒 ",
                year: "2014",
                director: "刘镇伟",
                star: "周星驰 / 吴孟达 / 罗家英",
                type: "喜剧 / 爱情 / 奇幻 / 古装",
                introduction: " 孙悟空(周星驰)护送唐三藏(罗家英)去西天取经路上,与牛魔王合谋欲杀害唐三藏,并偷走了月光宝盒,此举使观音萌生将其铲除心思,经唐三藏请求,孙悟空被判五百年后重新投胎做人赎其罪孽...."
            }
        */
        // 在此补全代码
        let btn=document.getElementById('btn');
        let intro=document.getElementById('intro');
        
        // 输入用户参数函数(newInfo是用户参数)
        const text=newInfo=>{
            // 设置默认参数
            const lastInfo={
                name: "大话西游之月光宝盒 ",
                year: "2014",
                director: "刘镇伟",
                star: "周星驰 / 吴孟达 / 罗家英",
                type: "喜剧 / 爱情 / 奇幻 / 古装",
                introduction: " 孙悟空(周星驰)护送唐三藏(罗家英)去西天取经路上,与牛魔王合谋欲杀害唐三藏,并偷走了月光宝盒,此举使观音萌生将其铲除心思,经唐三藏请求,孙悟空被判五百年后重新投胎做人赎其罪孽...."
            }
            // 用户参数和默认参数展开形成新的参数对象
            const info={...lastInfo,...newInfo};
            // 文本设置
            intro.innerHTML=`<h2>名称:${info.name}</h2><br><p>导演:${info.director}</p><p>主演:${info.star}</p><p>类型:${info.type}</p><p>上映年份:${info.year}</p><p>简介:${info.introduction}</p>`;
            
        }
        // 默认调用函数
        text();

        // 设置点击事件监听
        btn.addEventListener('click',()=>{
            // 传入新参数
            text({
                name: "功夫 ",
                year: "2004",
                director: "刘镇伟",
                star: "周星驰 / 黄圣依",
                type: "喜剧 / 爱情 / 奇幻 ",
                introduction: " 20世纪40年代的中国广东,有一名无可救药的小混混阿星(周星驰饰),此人能言善道,擅耍嘴皮,但意志不坚,一事无成。他一心渴望加入手段冷酷无情、恶名昭彰的斧头帮,并梦想成为黑道响叮当的人物。此时斧头帮正倾全帮之力急欲铲平唯一未收入势力范围的地头,未料该地卧虎藏龙,痴肥的恶霸女房东加上与其成对比的懦弱丈夫二叔公,率领一班深藏不露的武林高手,大展奇功异能,对抗恶势力...."
            })
        },false);
    </script>

一开始我设置h2时,一直不对,所有字都是加大黑体,后来全部先用<p>便签,然后再改才对。中间用尝试在css设置样式,

<h2>名称:${info.name}</h2>

#intro p:first-child想设置第一个p便签为什么不成功


写回答

1回答

好帮手慕慕子

2021-05-28

同学你好,代码正确,注释中的理解也是对的,针对同学的问题解答如下:

猜测是同学代码书写过程中忘记写闭合标签,或者是其他不细心导致的问题。老师使用p标签测试,是可以正确设置样式的,如下:

http://img.mukewang.com/climg/60b04a5c09ed09f414010831.jpg

建议同学以后在书写代码的过程中细心一点就可以啦~

祝学习愉快~

0

0 学习 · 15276 问题

查看课程