要求： 制作 58同城房屋展示网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>58 house message </title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box1 #button{
font-size: 20px;
width: 50px;
color: black;
border: 0;
background-color: rgba(0,0,0,0);
margin-left: 10px;
margin-top: 10px;
}
#box1 #button:focus{
outline: 0;
}
.box{
height: 180px;
background-color: rgb(200,200,200,0.3);
border: 0;
border-bottom: 1px solid rgb(150,150,150);
overflow: hidden;
}
.img{
margin-top: 15px;
float: left;
margin-left: 20px;
}
.brox{
height: 150px;
margin-top: 15px;
width: 400px;
float: left;
margin-left: 10px;
overflow: hidden;
}
.p{
color: black;
font-size: 25px;
width: 400px;
float: left;
height: 70px;
}
.price{
font-size: 30px;
color: red;
}
.namemessage{
width: 400px;
height: 40px;
text-align:left;
float: left;
}
</style>
</head>
<body>
<div id="box1">
<div id="suggest"><input type="button" name="刷新" id="button" value="刷新" /></div>
</div>
<script type="text/javascript">
// 获取aJax数据
$('#box1 #button').on('click',function(){
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/houseList",
async:true,
success:function(result){
messages = result['datalist']
for (i=0;i<10;i++){
var num = parseInt(Math.random()*(messages.length))
var message = messages[num]
console.log(message)
var address = message['image']
var boxNode = $('<div class="box"></div>')
//添加img
var imgNode = $("<img src='' class='img'/>")
imgNode.attr('src',address)
boxNode.append(imgNode)
//添加box2
var brNode = $('<div class="brox"></div>')
//添加 title
var pNode = $('<p class="p"></p>')
var titlemessage = message['title']
pNode.text(titlemessage)
brNode.append(pNode)
//添加房屋介绍
var nameNode = $('<div class="namemessage"></div>')
if (message['name'] != ""){
fontNode = $('<font class="name"></font>')
fontNode.text(message['name'] + " | ")
nameNode.append(fontNode)
}
if (message['type'] != ""){
fontNode = $('<font class="name"></font>')
fontNode.text(message['type'] + " | ")
nameNode.append(fontNode)
}
if (message['area'] != ""){
fontNode = $('<font class="name"></font>')
fontNode.text(message['area'])
nameNode.append(fontNode)
}
brNode.append(nameNode)
//添加price
var priNode = $('<p class="price"></p>')
var pricemessage = message['price']
priNode.text(pricemessage)
brNode.append(priNode)
//刷新页面
boxNode.append(brNode)
$('#box1').append(boxNode)
}
}
});
});
</script>
</body>
</html>
practice.png
