<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
position: relative;
}
#top{
margin-top: 200px;
/*background-color: yellow;*/
text-align: center;
border-bottom: 1px solid #808080;
}
input{
font-size: 40px;
outline: none;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid black;
margin-bottom: 10px;
}
button{
width: 80px;
height: 40px;
color: white;
background-color: red;
font-size: 20px;
}
#bottom{
margin: auto;
width: 600px;
font-size: 30px;
/*background-color: pink;*/
}
</style>
</head>
<body>
<div id="top">
<input type="text" id="" value="蛇" />
<button>查询</button>
</div>
<div id="bottom"></div>
</body>
</html>
<script type="text/javascript">
//点击函数
function getData(){
//获取输入的框的内容
var goal = $('input').val()
console.log(goal)
//获取数据
var url = 'http://api.tianapi.com/txapi/dream/'
$.get(url,{'key':'772a81a51ae5c780251b1f98ea431b84','word':goal},function(re){
// console.log(re)
var allData = re.newslist
// console.log(allData)
for(var x in allData)
var data = allData[x]
// console.log(data)
ddf = data.result
console.log(ddf)
//清空上次内容
$('#bottom').empty()
//展示解梦内容
var contentNode = $("<p>"+ddf+"</p>")
$('#bottom').append(contentNode)
})
// //展示解梦内容(写函数外会延后)
// var contentNode = $("<p>"+ddf+"</p>")
// $('#bottom').append(contentNode)
}
$('button').on('click',getData)
</script>
网友评论