实时获取天气，时间，点击切换背景

实时获取天气

首先，写一个div

<div class="time"></div>

然后，引入所需js

<script src="https://pv.sohu.com/cityjson?ie=utf-8" type="text/javascript"></script>

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

最后，加上如下代码就好啦

  <script>
    var main = this
    jQuery.support.cors = true
    $.ajax({
      url: "http://wthrcdn.etouch.cn/weather_mini",
      type: "GET",
      dataType: "json",
      data: { city: returnCitySN.cname.split("省")[1] }, //(returnCitySN.cname).split('省')[1]：获取所在的市
      success: function (res) {
        //var res=JSON.parse(res);
        main.city = res.data.city //所在城市
        var maxTemperature = res.data.forecast[0].high //最高温度
        var minTemperature = res.data.forecast[0].low //最低温度
        var weather = minTemperature.split(" ")[1] + "~" + maxTemperature.split(" ")[1]
        var type = res.data.forecast[0].type //天气状态
        main.weather = weather + " " + type
        var d = document.querySelector(".logo-weather-degree")
        d.innerHTML = main.weather
      },
      error: function (err) {
        console.log(err)
      }
    })
  </script>

如果想要所在城市的话把  d.innerHTML = main.weather 写成  d.innerHTML = main.cyty + main.weather  就好啦

okk，获取天气完成

———————————————————这是分割线———————————————————

实时获取年月日时分秒

首先，写一个div

<div id="Date"></div>

然后，加入下列代码

<script type="text/javascript">
    window.onload = function () {
      setInterval(function () {
        var date = new Date()
        var year = date.getFullYear() //获取当前年份
        var mon = date.getMonth() + 1 //获取当前月份
        var da = date.getDate() //获取当前日
        var day = date.getDay() //获取当前星期几
        var h = date.getHours() //获取小时
        var m = date.getMinutes() //获取分钟
        var s = date.getSeconds() //获取秒
      
        var d = document.getElementById("Date")
        d.innerHTML =year + "-" + mon + "-" + da + " " + "星期" + day+" " +h + ":" + m + ":" + s
      }, 1000)
    }
  </script>

这个时候我们得到的是这样的，

那怎么由 2022-9-2 星期5 13:43:1  变成  2022-09-02 星期五 13:43:01呢？ 

 由星期1转变成星期一

        // 星期1转换成星期一
        if (day == 0) day = "日"
        if (day == 1) day = "一"
        if (day == 2) day = "二"
        if (day == 3) day = "三"
        if (day == 4) day = "四"
        if (day == 5) day = "五"
        if (day == 6) day = "六"

由2022-9-2转变成2022-09-02

        // 日期时间不够两位前面补0
        if (mon < 10) mon = "0" + "" + mon
        if (da < 10) da = "0" + "" + da
        if (h < 10) h = "0" + "" + h
        if (m < 10) m = "0" + "" + m
        if (s < 10) s = "0" + "" + s

这样就好啦，

okk   实时获取年月日时分秒完成

————————————————————这是分割线——————————————————

点击切换背景

首先，基本布局来一下

<div class="aaa">
    <div class="bbb">123345</div>
    <div class="bbb">123345</div>
    <div class="bbb">123345</div>
    <div class="bbb">123345</div>
</div>

然后，样式搞一下

<style>
.aaa{
   display: flex;
   justify-content: center;
}
.aaa .bbb {
  width: 141px;
  height: 41px;
  margin-top: 45px;
  text-align: center;
  line-height: 41px;
  background-image: url(images/zhyq-menue-active.967c3309.png);
  background-size: 100% 100%;
  background-repeat: no-repeat
}
.aaa .logo-menu-active {
  background-image: url(images/zhyq-menue.2a0a2b02.png)
}
</style>

之后就是这个样子的啦

 最后，再加上洗下面这些代码就好啦

<script>
    let box = document.querySelectorAll(".aaa .bbb")
    for (let i = 0; i < box.length; i++) {
      box[i].onclick = function () {
        for (let i = 0; i < box.length; i++) {
          box[i].className = "bbb" //添加默认类名
        }
        this.classList.add("logo-menu-active") //设置点击效果类名
      }
    }
</script>

最后的效果就是这个样子的啦

 okk   点击切换背景就完成啦，如果是切换样式的话也是同理的哦

okk   这篇文章到这里就完啦，