用JavaScript实现的太空人手表

JS写的太空人手表，没有用canvas、svg。
主要用几个大的函数来动态显示时间、天气这些。
天气的获取用到了AJAX请求。
代码中有详细的注释，可以通过看注释了解。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021033118492454.gif#pic_center

主要是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+"日"+"
"+"星期"+week;
       }else if(week==2){
            week=number[1];
            timer.innerHTML=month+"月"+day+"日"+"
"+"星期"+week;
       }else if(week==3){
            week=number[2];
            timer.innerHTML=month+"月"+day+"日"+"
"+"星期"+week;
       }else if(week==4){
           week=number[3];
           timer.innerHTML=month+"月"+day+"日"+"
"+"星期"+week;
       }else if(week=5){
           week=number[4]
           timer.innerHTML=month+"月"+day+"日"+"
"+"星期"+week;
       }else if(week==6){
           week=number[5];
           timer.innerHTML=month+"月"+day+"日"+"
"+"星期"+week;
       }else {
        timer.innerHTML=month+"月"+day+"日"+"
"+"星期"+week;
       }
   }
   shijian();