作业

最新推荐文章于 2022-10-21 10:20:40 发布

MXWzjw

最新推荐文章于 2022-10-21 10:20:40 发布

阅读量160

点赞数

分类专栏：前端文章标签：作业

本文链接：https://blog.csdn.net/MXWzjw/article/details/78530608

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>CODING COFFEE</title>  
        <style type="text/css">  
            h1{  
                color: blue;  
                font-size: 60px;  
                }  
            hr{  
                width: 60%;  
                border: 2px dashed #eee;  
            }  
            div{  
                text-align: center;  
            }  
            .content-wrapper{  
                width:750px;  
                margin:0 auto;  
            }  
            .img{  
                float:left;  
            }  
            .para{  
                float:right;  
                width:50%;  
            }  
        </style>  
    </head>  
    <body>  
            咖啡名：  
            <p>  
                <input id="name" type="text" value="">  
            </p>  
            描述：  
            <p>  
                <textarea id="description" type="text" cols="20" rows="10"></textarea>   
            </p>  
            图片地址：  
            <p>  
                <input id="img_url" type="text" value="">  
            </p>  
              
  
            <button οnclick="addCoffee()">新增咖啡</button>  
            <button id="clearCoffee">删除咖啡</button>  
            <h1 id="main">CODING COFFEE MENU</h1>  
        <div id="wrap">  
                          
        </div>  
        <script type="text/javascript">  
            function lg(a){  
            console.log(a);  
        }  
            function addCoffee(){  
                var name = document.getElementById('name').value;  
                var desc = document.getElementById('description').value;  
                var img_url = document.getElementById('img_url').value;  
                var html1 = '<div class="content-wrapper"><div class="img"><img src="'+img_url+'"></div>';  
                var html2 = '<div class="para"><h2>'+name+'</h2>';  
                var html3 ='<p>'+desc+'</p></div>';  
                var html4 = '<div style="clear: both;"></div></div>';  
                var add = html1+html2+html3+html4;  
                var newhtml = document.getElementById('wrap').innerHTML+add;  
                document.getElementById('wrap').innerHTML = newhtml;  
  
                var clearCoffee = document.getElementById("clearCoffee");  
                var wrap = document.getElementById("wrap");  
                var childs = wrap.childNodes;   
                var wrapLength = wrap.getElementsByClassName("content-wrapper").length;  
                clearCoffee.onclick = function(){  
                    wrap.removeChild(wrap.childNodes[wrapLength-1])  
                }  
                  
            }   
              
        </script>  
    </body>  
</html>