用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+"日"+"<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();