2017.11.13作业

来源：互联网发布：数据质量提升方案编辑：程序博客网时间：2024/06/15 18:57
<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 onclick="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>
阅读全文
0 0