zoukankan html css js c++ java

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

查看全文

相关阅读:
POJ 1386 Play on Words（单词建图+欧拉通（回）路路判断）
HTTP协议详解？？
Python 中三大框架各自的应用场景??
django 开发中数据库做过什么优化??
谈一下你对 uWSGI 和 nginx 的理解??
django 中间件的使用??
Flask 中请求钩子的理解和应用？
七层模型？ IP ，TCP/UDP ，HTTP ，RTSP ，FTP 分别在哪层？
说说 HTTP 和 HTTPS 区别??
hasattr() getattr() setattr() 函数使用详解？？

原文地址：https://www.cnblogs.com/qiao298/p/11455784.html