| | |
| | | <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> |
| | | <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> |
| | | |
| | | <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js"></script> |
| | | |
| | | <style> |
| | | #weather { |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | position: relative; |
| | | right: -20px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .time { |
| | | display: block; |
| | | width: 100%; |
| | | text-align: right; |
| | | padding-right: 20px; |
| | | } |
| | | |
| | | #weather a { |
| | | color: #fff !important; |
| | | } |
| | | </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" |
| | | <div id="weather"> |
| | | <span class="time"> |
| | | {{nowTime.year}}年{{nowTime.month}}月{{nowTime.day}}日 {{nowTime.hour}}:{{nowTime.minute}}:{{nowTime.second}} |
| | | </span> |
| | | <!-- {{city}}:{{weathers.nowWeather}} {{weathers.highTemperature}}-{{weathers.lowTemperature}} --> |
| | | <!-- <span class="weathers"> |
| | | <iframe id="real_weather" 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> |
| | | </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> |
| | | </html> |