匯率插件學習/jQuery和Ajax

製作匯率插件

疫情期間，大家最好不要出門，安安全全在家辦公和學習。
此次學習Ajax，製作了百度的匯率插件，百度查找匯率，就可以查看到原型。

製作好的功能及效果圖

1. 點擊轉換匯率換算
2. 頁面顯示匯率運算結果
3. 點擊交換select
4. 顯示更新時間

• 頁面中換算匯率和下拉框中的國家貨幣單位都是從後臺接口返回的。
  

步驟

1. 查找匯率接口，找到一個
   https://api.exchangerate-api.com/v4/latest/USD
   並試驗可以用。
   
2. 寫靜態畫面。
   基本畫面一開始做成這樣，後面慢慢調整。
   
3. 使用Ajax調用接口，並在success中進行賦值與運算。
   例如：

   $.ajax({
   				type: 'post',
   				url: 'https://api.exchangerate-api.com/v4/latest/USD',
   				dataType: 'JSON',
   				contentType: 'application/x-www-form-urlencoded',
   				data: JSON.stringify(obj),
   				success: function(data) {
   					for(var key in data.rates) {
   						let input = $('#i').val();
   						$("#id_select2_demo1").append("<option value='" + key + "'>" + key + "</option>");
   						$(".val1").html(input);
   						$(".val2").html(input*data.rates[selectorx2.val()]);
   						let ti = getTime(data.time_last_updated);
   						$("#tim").html(ti)
   					}
   				}
   			})
   

4. 獲取當前時間

// 獲取當前時間
			function getTime() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期

				var hour = now.getHours(); //得到小時
				var minu = now.getMinutes(); //得到分鐘
				var sec = now.getSeconds(); //得到秒

				month = month + 1;
				　　
				if(month < 10) month = "0" + month;
				if(date < 10) date = "0" + date;
				if(hour < 10) hour = "0" + hour;
				if(minu < 10) minu = "0" + minu;
				if(sec < 10) sec = "0" + sec;
				var currentTime = "";
				currentTime = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
				$("#time").html(currentTime);
			}

學習過程中的插曲

昨天，也就是2020/2/3，本人查找匯率的時候，顯示1美元=6.9364人民幣。而今天回頭再看，發現人民幣竟然貶值了，1美元=7.0208人民幣。忙不迭感嘆啊，疫情爆發，人民幣貶值，這場阻擊戰，耗費了我們大量時間、金錢與精力，導致全國經濟衰退，人民幣貶值。

目前的希冀

疫情面前，大家萬衆一心。目前痊癒人數已超出死亡人數，眼看疫情走向好轉的趨勢，望在最後緊要關頭人們都配合政府，打贏這場疫情防護戰！

源碼

本人將此次製作的匯率插件源碼上傳到本人資源，方便有需要的自行下載查看。
傳送門。
傳送門2.0。