使用pycharm开发Django2.2全过程（十）-实现实时时间显示，天气获取显示

效果如下：

时间每秒更新，自动获取地理位置，代码在下面说明，图片也需要自己去替换，但对应如何引用js，css不再说明，请查看之前的文章。
HTML文件内容
添加内容，引用js：

添加内容

   

    
00:00:00
    
日期
    
    

    


    

        
多云
        
2-7℃
        
--市
    

JS文件内容：

//获取实时时间
Date.prototype.format = function (fmt) {
            var o = {
                "y+": this.getFullYear, //年
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds() //秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
setInterval("document.getElementById('time').innerHTML = (new Date()).format('hh:mm:ss');" +
            "document.getElementById('date').innerHTML = (new Date()).format('yyyy-MM-dd');", 1000);
//获取天气
Weather();
function Weather() {
        jQuery.support.cors = true;
        $.ajax({
          url: "http://wthrcdn.etouch.cn/weather_mini",
          type: "GET",
          dataType: 'json',
          data: {city: (returnCitySN.cname).split('省')[1]},//returnCitySN是获取地理位置，在https://pv.sohu.com/cityjson?ie=utf-8获取的，内容：var returnCitySN = {"cip": "119.39.22.106", "cid": "430100", "cname": "湖南省长沙市"};
          success: function (res) {
            document.getElementById('weather-city').innerHTML= res.data.city;//所在城市
            var maxTemperature = res.data.forecast[0].high;//最高温度
            var minTemperature = res.data.forecast[0].low;//最低温度
            document.getElementById('weather-Temperature').innerHTML= minTemperature.split(' ')[1] + '-' + maxTemperature.split(' ')[1];
            var type=res.data.forecast[0].type;//天气状态
            document.getElementById('weather-type').innerHTML= type;
            document.getElementById('weatherImg').setAttribute('src', '../static/images/weather/'+type+'.png');
          },
          error: function (err) {
            console.log(err)
          }
        });
      }

css文件内容：

.weather-box {
    width: 22rem;
    height: 5rem;
    border: 0.2rem solid #0E94EA;
    display: flex;
    
    align-items: center;
    top:50%;
    left: 50%;

}
.weather-box>.data {
    width: 10rem;
    height: 4rem;
    margin-top: 0.5rem;
    border-right: 0.2rem solid #cdddf7;
}
.data>p {
    font-size: 1rem;
    margin: 0rem;
    color: #cdddf7;
    text-align: center;
}
.data>p.time {
    font-size: 2rem;
    height: 2rem;
}
#date{
    font-size: 1rem;
    height: 2rem;
    margin: 0.6rem;
}
.weather {
    width: 11rem;
    height: 4rem;
    display: flex;//建立一个框
    align-items: center;
    margin-top: 0.2rem;
    margin-left: 0.5rem;
}
.weather>img {
    height: 100%;
}
.weather>div {
    width: 6rem;
    height: 100%;
    margin-left: 0.5rem;
}
.weather>div>p {
    font-size: 0.5rem;
    color: #cdddf7;
    text-overflow: ellipsis;//显示省略符号来代表被修剪的文本
    white-space: nowrap;//文本不会换行，文本会在在同一行上继续，直到遇到 br标签为止。
    height: 0.3rem;
    line-height: 0.5rem;
}
.weather>div>p.active {
    color: white;
    font-size: 1rem;
}

ps:
有实例可直接下载，效果如下：