JS写的太空人手表，没有用canvas、svg。
主要用几个大的函数来动态显示时间、天气这些。
天气的获取用到了AJAX请求。
代码中有详细的注释，可以通过看注释了解。
主要是JS部分
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();