The spaceman watch written by JS does not use canvas and svg.
Mainly use several large functions to dynamically display the time and weather.
AJAX request is used to obtain the weather.
There are detailed comments in the code, which can be understood by reading the comments.
Mainly JS part
setInterval(function time () {
//因为要实时获取时间，索引用了一个定时器,每隔10ms就会执行一次time这个函数
var data=new Date()
var hour=data.getHours(); //获取当前时间：时分秒
var min=data.getMinutes()
var second=data.getSeconds()
if(second<10){
//为了美观，个位数的时间就会在前面添加一个数字0。
second="0"+second;
}
if(min<10){
min="0"+min;
}
if(hour<10){
hour="0"+hour
}
var p=document.getElementById("p")
p.innerText=hour+":"+min+":"+second //把用JS实时获取的时间插入到p标签。
},10)
//获取当前天气，并动态显示
var xmlhttp;
function wether(){
$.ajax({
//用jqurey封装的AJAX来从网站获取天气数据
url:"http://wthrcdn.etouch.cn/weather_mini?city=成都", //查找天气的网站，
dataType:"json", //预期服务器返回的数据类型。
async:false, //设为同步请求，将锁住浏览器，用户的其他操作必须等请求完成才能进行
success:function(data){
//必须是function类型的参数，如果请求成功就会调用这个函数，
function tianqi(){
// 闭包函数 函数外部可以访问内部的变量
xmlhttp=data;
return xmlhttp;
};
tianqi();
}
})
console.log(xmlhttp);
}
setInterval(wether(),1000); //因为是显示实时温度所以就用定时器，每个1s调用一次函数。
var high=xmlhttp.data.forecast[0].high //获取最高气温 数据类型是： 高温 26℃
var low=xmlhttp.data.forecast[0].low; //获取最低气温 数据类型是： 低温 16℃
high=high.replace(/[高温 ]/g,"") //利用正则表达式把 “高温 ”去除
low=low.replace(/[低温 ]/g,"") //利用正则表达式把 “低温 ”去除
var now=xmlhttp.data.wendu; //获取当前的温度
var img=["./太阳.png","./多云.png","./霾.png","./下雨.png"] //该数组保存的是天气的图标的地址名
var weather=xmlhttp.data.forecast[0].type; //获取天气的类型 例如：小雨 多云 阴
function tem(){
let temhigh=document.getElementById("tem-high");
let temlow=document.getElementById("tem-low"); //获取准备用来保存最高温和最低温的标签
temlow.innerText=low //往这个标签中插入数据
temhigh.innerText=high
let wh=document.getElementById("weather"); //获取准备用来保存天气类型的标签
wh.innerText=weather
var whnow=document.getElementById("now"); //保存现在的温度
whnow.innerText=now+"℃"
}
setInterval(tem(),1000); //因为是显示实时温度所以就用定时器，每个1s调用一次函数。
//天气图片动态改变
function whimg(){
let sun=document.getElementById("sun"); //获取用来保存天气图片的img标签。
if(weather=="多云"||weather=="阴"){
//weather是从网站获取的天气类型。
sun.src=img[1]; //然后用if判断里面是否等于 “多云”、“阴”，如果相等，就把img标签中的src地址赋值位之前的img数组的值
} //下面依次类推
else if(weather=="霾"){
sun.src=img[2];
}
else if(/[雨]/g.test(weather)){
sun.src=img[3]
}
else{
sun.src=img[0]
}
}
setInterval(whimg(),1000)
//显示月份 日期 星期的函数
function shijian(){
let date=new Date();
let month=date.getMonth()+1; //用来显示月份 因为date.getMonth()获取到的月份要少一个月，所以就加1。
let day=date.getDate(); //获取日
let week=date.getDay(); //获取星期几 但是是阿拉伯数字
let timer=document.getElementById("time");
let number=["一","二","三","四","五","六","日"]; //因为星期显示阿拉伯数字 所以用if来改变阿拉伯数字，显示大写的数字
if(week==1){
week=number[0];
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}else if(week==2){
week=number[1];
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}else if(week==3){
week=number[2];
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}else if(week==4){
week=number[3];
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}else if(week=5){
week=number[4]
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}else if(week==6){
week=number[5];
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}else {
timer.innerHTML=month+"月"+day+"日"+"<br>"+"星期"+week;
}
}
shijian();