一个简单调用天气API接口的小例子

匿名 (未验证) 提交于 2019-12-02 23:57:01
 1 @{  2     Layout = null;  3 }  4 <link href="~/Content/css/style.css" rel="stylesheet" />  5 <script src="~/Scripts/jquery-3.3.1.js"></script>  6 <!DOCTYPE html>  7   8 <html>  9 <head> 10     <meta name="viewport" content="width=device-width" /> 11     <title>CSS3卡片布局天气预报动画特效</title> 12 </head> 13 <body> 14     <div> 15         <div class="background"> 16             <div class="big-1"></div> 17             <div class="big-2"></div> 18             <div class="big-3"></div> 19             <div class="big-4"></div> 20             <div class="big-5"></div> 21             <div class="big-6"></div> 22             <div class="big-7"></div> 23             <div class="big-8"></div> 24             <div class="big-9"></div> 25             <div class="big-10"></div> 26             <div class="medium-1"></div> 27             <div class="medium-2"></div> 28             <div class="medium-3"></div> 29             <div class="medium-4"></div> 30             <div class="medium-5"></div> 31             <div class="medium-6"></div> 32             <div class="medium-7"></div> 33             <div class="medium-8"></div> 34             <div class="medium-9"></div> 35             <div class="medium-10"></div> 36             <div class="small-1"></div> 37             <div class="small-2"></div> 38             <div class="small-3"></div> 39             <div class="small-4"></div> 40             <div class="small-5"></div> 41             <div class="small-6"></div> 42             <div class="small-7"></div> 43             <div class="small-8"></div> 44             <div class="small-9"></div> 45             <div class="small-10"></div> 46             <div class="moon"> 47                 <div class="crater crater-1"></div> 48                 <div class="crater crater-2"></div> 49                 <div class="crater crater-3"></div> 50                 <div class="crater crater-4"></div> 51                 <div class="crater crater-5"></div> 52                 <div class="crater crater-6"></div> 53                 <div class="crater crater-7"></div> 54                 <div class="crater crater-8"></div> 55                 <div class="crater crater-9"></div> 56                 <div class="crater crater-10"></div> 57                 <div class="crater crater-11"></div> 58             </div> 59             <div class="hillWrapper"> 60                 <div class="hill hill-1"></div> 61                 <div class="hill hill-2"></div> 62                 <div class="hill hill-3"></div> 63                 <div class="hill hill-4"></div> 64                 <div class="hill hill-5"></div> 65             </div> 66             <div class="descriptionWrapper" id="tbody"> 67  68             </div> 69         </div> 70     </div> 71 </body> 72 </html> 73 <script> 74     $(function () { 75         $.ajax({ 76             url: "http://wthrcdn.etouch.cn/weather_mini?citykey=101010200", 77             type: "get", 78             dataType: "json", 79             success: function (data) { 80                 $.each(data, function (index, row) { 81                     var d = '<div class="temperatureWrapper">' + row.city + '</div>' 82                         + '<div class="infoWrapper">' + row.forecast[0].date + '</div>' 83                         + '<div class="dateWrapper">' 84                         + '<div class="line">' + row.forecast[0].high + '</div>' 85                         + '<div class="line">' + row.forecast[0].type + '</div>' 86                         + '</div>' 87                     $("#tbody").append(d); 88                 }) 89             } 90         }) 91     }) 92 </script>
页面

里面有一个css动画,可以根据自己需要去找

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!