美文网首页
day9-作业-周公解梦

day9-作业-周公解梦

作者: 2ez4ddf | 来源:发表于2018-12-13 20:32 被阅读0次
    <!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>
    

    相关文章

      网友评论

          本文标题:day9-作业-周公解梦

          本文链接:https://www.haomeiwen.com/subject/uvfihqtx.html