提供的接口地址: https://www.jisuapi.com/api/recipe/
菜谱搜索:
效果:
HTML:
<div id="div1">
</div>
<div id="div2" >
</div>
<div id="div3">
</div>
<div id="div4">
</div>
CSS:
body {
background: wheat;
}
#div2 p {
margin: 0px;
position: relative;
height: 40px;
top: -350px;
left: 250px;
height: 32px;
margin-bottom: 2px;
}
#div1 {}
/* 内容 */
.img1Div>h2 {
width: 60%;
background: lavenderblush;
text-indent: 30px;
font-size: 15px;
font-weight: lighter;
line-height: 30px;
}
.img1 {
padding-bottom: 10px;
}
.pp {
color: #ffffff;
font-size: 25px;
background: cadetblue;
width: 150px;
text-align: center;
}
.span1 {
width: 100px;
display: inline-block;
}
#div4 {
width: 40%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
#div4 h4{
font-weight: bolder;
color:coral;
}
.span2 {
line-height: 30px;
width: 200px;
height: 200px;
text-align: center;
padding: 20px;
}
.imgs {
border-radius: 50%;
}
#div2{
height: 10px;
}
Jquery:
<script type="text/javascript">
function getajax() {
$.ajax({
type: "get",
url: "text/cp.json",
async: true,
success: function(res) {
var lis = res.result.list;
//醋溜白菜介绍
for (var i = 0; i < lis.length; i++) {
var img1 = $("<img class='img1' src ='" + lis[i].pic + "'/>" +
"<div class='img1Div'><h2 >" +
lis[i].content + "</h2><div/>")
$("#div1").html(img1)
$("#div2").html($(
"<p class='pp'>" +
lis[i].name + "</p>" +
"<p><strong>食用人数:</strong>" + lis[i].peoplenum + "</p>" +
"<p><strong>烹饪时间:</strong>" + lis[i].cookingtime + "</p>" +
"<p><strong>热蒸时间:</strong>" + lis[i].cookingtime + "</p>" +
"<p><strong>功效:</strong>" + lis[i].tag + "<p/>"
))
//醋溜白菜功效
for (var j = 0; j < lis[i].material.length; j++) {
var span1 = $("<span class='span1'>" + lis[i].material[j].mname + ':' + lis[i].material[
j].amount + "</span>")
$("#div3").append(span1)
}
//食材
for (var j = 0; j < lis[i].process.length; j++) {
var span2 = $("<div class='span2'><img class='imgs' src='" + lis[i].process[j].pic + "'/><h4>" + lis[i].process[
j].pcontent +
"</h4></div>")
$("#div4").append(span2)
}
}
}
})
}
//调用
getajax()
</script>