1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| <!DOCTYPE html>
| <html lang="en">
|
| <head>
| <meta charset="UTF-8">
| <meta http-equiv="X-UA-Compatible" content="IE=edge">
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| <title>天气</title>
| <!-- axios -->
| <script src='../map/lib/axios.js'></script>
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
| <style>
| #weather {
| font-weight: 400;
| opacity: 0.7;
| font-size: 14px;
| display: flex;
| align-items: center;
| justify-content: center;
| position: relative;
| right: -20px;
| }
| .time {
| position: relative;
| top: -6px;
| }
| </style>
| </head>
|
| <body>
| <div id="weather">
| <span class="time">
| {{nowTime.year}}年{{nowTime.month}}月{{nowTime.day}}日 {{nowTime.hour}}:{{nowTime.minute}}:{{nowTime.second}}
| </span>
| <span class="weathers">
| <!-- {{city}}：{{weathers.nowWeather}} {{weathers.highTemperature}}-{{weathers.lowTemperature}} -->
| <iframe width="235" scrolling="no" height="30" frameborder="0" allowtransparency="true"
| src="https://i.tianqi.com?c=code&id=34&icon=1&site=12"></iframe>
| </span>
| </div>
| <script>
| var me = new Vue({
| el: '#weather',
| data: {
| nowTime: {
| year: '',
| month: '',
| day: '',
| hour: '',
| minute: '',
| second: '',
| }
| },
| methods: {
| getNewTime() {
| this.nowTime.year = (new Date()).getFullYear();
| this.nowTime.month = (new Date()).getMonth() + 1;
| this.nowTime.day = (new Date()).getDate();
| this.nowTime.hour = (new Date()).getHours() < 10 ? '0' + (new Date()).getHours() : (new Date()).getHours();
| this.nowTime.minute = (new Date()).getMinutes() < 10 ? '0' + (new Date()).getMinutes() : (new Date()).getMinutes();
| this.nowTime.second = (new Date()).getSeconds() < 10 ? '0' + (new Date()).getSeconds() : (new Date()).getSeconds();
| },
| },
| mounted() {
| this.getNewTime();
| setInterval(() => {
| this.getNewTime();
| }, 1000);
| }
| })
| </script>
|
| </body>
|
| </html>
|
|
