<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<style type="text/css">
#box1{
margin-left: 50px;
margin-top: 20px;
}
#box1>div{
width: 250px;
height: 50px;
background-color: #5F9EA0;
color: white;
font-size: 20px;
margin-bottom: 3px;
line-height: 50px;
text-align: center;
position: relative;
}
.del{
position: absolute;
right: 10px;
cursor: pointer;
}
#box2{
margin-left: 50px;
margin-top: 20px;
}
#box2>input{
width: 250px;
height: 30px;
text-align: center;
font-size: 20px;
border: 0;
outline: 0;
border-bottom: 1px solid lightgray;
}
#box2>button{
width: 70px;
height: 30px;
font-size: 16px;
color: white;
background-color: orangered;
border: 0;
outline: 0;
}
</style>
</head>
<body>
<div id="box1">
<div id="">
<font>苹果</font>
<font class="del">×</font>
</div>
<div id="">
<font>香蕉</font>
<font class="del">×</font>
</div>
<div id="">
<font>草莓</font>
<font class="del">×</font>
</div>
<div id="">
<font>火龙果</font>
<font class="del">×</font>
</div>
</div>
<div id="box2">
<input type="" name="" id="" value="" />
<button>确定</button>
</div>
<script type="text/javascript">
//1.确定按钮点击事件
$('#box2>button').on('click', function(){
//1)获取水果名
var furitName = $('#box2>input').val()
if(furitName.length == 0){
furitName = prompt('请输入水果名:')
if(furitName == null){
return
}
}
//2)显示水果
$('#box1').prepend($('<div style="background-color: '+randowColor(0.5)+';"><font>'+furitName+'</font><font class="del">×</font></div>'))
//3)清空输入框
$('#box2>input').val('')
})
//2.删除水果事件
$('#box1').on('click', '.del', function(){
//js代码
//this.parentElement.remove()
//jQuery代码
$(this).parent().remove()
})
</script>
</body>
</html>
网友评论