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

效果如下：

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

添加内容

00:00:00

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:
有实例可直接下载，效果如下：