shuishen
2021-07-14 9d567acb7dc6c2c2caf9c715411983f2eb154b13
public/weather/index.html
@@ -2,74 +2,84 @@
<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}}日&nbsp;{{nowTime.hour}}:{{nowTime.minute}}:{{nowTime.second}}
        </span>&nbsp;&nbsp;
        <span class="weathers">
            <!-- {{city}}:{{weathers.nowWeather}}&nbsp;{{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}}日&nbsp;{{nowTime.hour}}:{{nowTime.minute}}:{{nowTime.second}}
    </span>&nbsp;&nbsp;
    <!-- {{city}}:{{weathers.nowWeather}}&nbsp;{{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>