一个简单调用天气API接口的小例子
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动画,可以根据自己需要去找