爱站程序员基地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=highlet wh=document.getElementById("weather"); //获取准备用来保存天气类型的标签wh.innerText=weathervar 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();
