first commit

历届学生/罗朝/项目练习/天气预报/js/rem.js

@@ -0,0 +1,59 @@
+(function (designWidth, maxWidth) {
+  var doc = document,
+      win = window;
+  var docEl = doc.documentElement;
+  var tid;
+  var rootItem, rootStyle;
+
+  function refreshRem() {
+      var width = docEl.getBoundingClientRect().width;
+      if (!maxWidth) {
+          maxWidth = 540;
+      }
+      ;
+      if (width > maxWidth) {
+          width = maxWidth;
+      }
+      //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
+      var rem = width * 100 / designWidth;
+      //兼容UC开始
+      rootStyle = "html{font-size:" + rem + 'px !important}';
+      rootItem = document.getElementById('rootsize') || document.createElement("style");
+      if (!document.getElementById('rootsize')) {
+          document.getElementsByTagName("head")[0].appendChild(rootItem);
+          rootItem.id = 'rootsize';
+      }
+      if (rootItem.styleSheet) {
+          rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
+      } else {
+          try {
+              rootItem.innerHTML = rootStyle
+          } catch (f) {
+              rootItem.innerText = rootStyle
+          }
+      }
+      //兼容UC结束
+      docEl.style.fontSize = rem + "px";
+  };
+  refreshRem();
+
+  win.addEventListener("resize", function () {
+      clearTimeout(tid); //防止执行两次
+      tid = setTimeout(refreshRem, 300);
+  }, false);
+
+  win.addEventListener("pageshow", function (e) {
+      if (e.persisted) { // 浏览器后退的时候重新计算
+          clearTimeout(tid);
+          tid = setTimeout(refreshRem, 300);
+      }
+  }, false);
+
+  if (doc.readyState === "complete") {
+      doc.body.style.fontSize = "16px";
+  } else {
+      doc.addEventListener("DOMContentLoaded", function (e) {
+          doc.body.style.fontSize = "16px";
+      }, false);
+  }
+})(375, 750);

历届学生/罗朝/项目练习/天气预报/js/wather.js

@@ -0,0 +1,218 @@
+(function(window,document) {
+
+
+  var is = true;
+  function weather () {
+    this.baseUrl = "http://103.91.219.160:9090/getWeather"
+    this.init()
+    this.WeatherIcon = [
+      { text: '多云', icon: './img/b1.png' },
+      { text: '晴', icon: './img/b0.png' },
+      { text: '阴', icon: './img/b2.png' },
+      { text: '雨', icon: './img/b8.png' }
+    ];
+
+    this.CityList = [ '合肥','六安','芜湖','阜阳','蚌埠','南京','苏州','上海','北京','杭州','上饶' ]
+
+  }
+
+  weather.prototype = {
+
+    init () {
+      if(localStorage.getItem("city") == null) {
+        this.getIndexData("合肥")
+      } else {
+        this.getIndexData(localStorage.getItem("city"))
+      }
+      
+      this.openDrap()
+      this.bindEnevtInput()
+    },
+
+
+    getIndexData (cityname) {
+      var self = this;
+      this.get(this.baseUrl,{ 
+        cityname: cityname,
+      }, function(res) {
+        self.renderToday(res.result.sk)
+        self.renderTodayInfo(res.result.sk,res.result.today)
+        self.renderFuture(res.result.future)
+      })
+    },
+
+    renderToday(sk) {
+    
+      this._(".content_top h2").innerText = `${sk.temp}°`;
+      this._(".content_top p").innerText = `${sk.humidity} | ${sk.wind_direction} | ${sk.wind_strength}`;
+    },
+
+    renderTodayInfo(sk,today) {
+      var self = this;
+      this._(".title_city").innerText = `${today.city}`
+      var list = [
+        { text: '温度: ', value: sk.temp, icons: '#icon-thermometer'},
+        { text: '湿度: ', value: sk.humidity, icons: '#icon-shidu'},
+        { text: '风力: ', value: sk.wind_strength, icons: '#icon-feng'},
+        { text: '天气: ', value: today.weather, icons: '#icon-tianqi'},
+        { text: '风向: ', value: sk.wind_direction, icons: '#icon-fangxiangpai'},
+        { text: '紫外线: ', value: today.uv_index, icons: '#icon-taiyangrichu'}
+      ];
+      this._(".content_today ul").innerHTML = ""
+      list.forEach(function(val,index,arr){
+        self._(".content_today ul").innerHTML += `<li>
+                                                    <svg class="icon" aria-hidden="true">
+                                                      <use xlink:href="${val.icons}"></use>
+                                                    </svg>
+                                                    <p>${val.text}${val.value}<p>
+                                                  </li>`
+      });
+    },
+
+    renderFuture(future) {
+
+      var self = this;
+      future.forEach(function(val,index,arr) {
+        self.WeatherIcon.forEach(function(value,key,data){
+          if(val.weather.indexOf("转") > -1){
+            var tex = val.weather.split("转")[1];
+            if(tex.indexOf(value.text) > -1) {
+              val.icon = value.icon
+            }
+          }else if(val.weather.indexOf(value.text) > -1){
+            val.icon = value.icon
+          }
+        })
+      });
+      self._(".content_future ul").innerHTML = ""
+      future.forEach(function(val,index,arr) {
+        self._(".content_future ul").innerHTML += `<li>
+                                                      <p>${val.week}</p>
+                                                      <img src="${val.icon}" alt="">
+                                                      <span>${val.temperature}</span>
+                                                    </li>`
+      })
+    },
+
+    openDrap() {
+      var self = this;
+      this._(".open-drap").onclick = function () {
+        if(is) {
+          self.renderHistoryList()
+          self._(".main").className = "main open-main"
+          self._(".menu").className = "menu open-menu"
+          is = false;
+        } else {
+          self._(".main").className = "main"
+          self._(".menu").className = "menu"
+          is = true;
+        }
+      }
+    },
+
+    renderHistoryList() {
+      var self = this;
+      this._(".his_info").innerHTML = ""
+      var listArray = JSON.parse(localStorage.getItem("city_history"));
+      if(listArray == null) {
+        this._(".his_info").innerHTML = `<span>没有历史城市数据...</span>`
+      }else {
+        listArray.forEach((v) => {
+          this._(".his_info").innerHTML += `<span>${v}</span>`
+        })
+      }
+
+      var span = document.querySelectorAll(".his_info span");
+      span.forEach(function(val,indx,arr){
+        val.onclick = function () {
+          self.getIndexData(val.innerText)
+          self._(".main").className = "main"
+          self._(".menu").className = "menu"
+          is = true;
+        }
+      })
+      
+    },
+
+    bindEnevtInput() {
+      var listArray = []
+      this._(".menu_center input").oninput = () => {
+        var cityname = this._(".menu_center input").value;
+        listArray = []
+        this.CityList.forEach((val) => {
+          if(val.indexOf(cityname) > -1 && cityname.length != 0) {
+            listArray.push(val)
+          }
+          
+        })
+        this._(".menu_center ul").innerHTML = ""
+        listArray.forEach((val) => {
+          this._(".menu_center ul").innerHTML += `<li>${val}</li>`
+        })
+
+        this.bindClickCity()
+      }
+    },
+
+    bindClickCity() {
+      var self = this, cityList = [];
+      console.log("1")
+      var li = document.querySelectorAll(".menu_center ul li");
+      li.forEach(function(val,indx,arr){
+        val.onclick = function () {
+          self.getIndexData(val.innerText)
+          self._(".main").className = "main"
+          self._(".menu").className = "menu"
+          is = true;
+
+          localStorage.setItem("city", val.innerText)
+          cityList.push(val.innerText)
+          console.log("3")
+          if(localStorage.getItem("city_history") == null) {
+            localStorage.setItem("city_history", JSON.stringify(cityList))
+          } else {
+            var list = JSON.parse(localStorage.getItem("city_history"))
+            console.log("4")
+            if( (JSON.stringify(list)).indexOf(val.innerText) > -1 ) {
+              console.log("5")
+              }else {
+                console.log("6")
+                list.push(val.innerText)
+                localStorage.setItem("city_history", JSON.stringify(list))
+                return false; 
+              }
+          }
+        }
+      })
+    },
+
+    /**
+     * GET请求的封装
+     * @param {*} url 请求地址 
+     * @param {*} params 需要发给后端的参数
+     * @param {*} callback 回调函数
+     */
+    get (url,params,callback) {
+      $.ajax({
+        type: 'GET',
+        url: url,
+        data: params,
+        success: function (res) {
+          callback(res)
+        },
+        error: function (err) {
+          throw new Error(JSON.stringify(err))
+        }
+      })
+    },
+
+    _(name) {
+      return document.querySelector(name)
+    }
+
+  }
+
+  window.Weather = weather
+
+
+})(window,document)