汇率插件学习/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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章