使用MUI制作基金单位净值查询平台

数据基于天天基金网,先pia上代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<!--mui.picker.min.js和mui.picker.min.css需要新建一个MUI演示项目后复制过来-->
		<script src="js/mui.picker.min.js"></script>	
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.picker.min.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			li span{
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">基金收益查询</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-header">
					输入查询信息
				</div>
				<div class="mui-card-content" style="padding-bottom: 20px;">
					<div class="mui-input-row">
						<label>基金代码</label>
						<input type="number" id="jjdm" placeholder="请输入基金代码">
					</div>
					<div class="mui-input-row">
						<label>查询日期</label>
						<input id="cxrq" type="text" placeholder="请输入查询日期">
					</div>
					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-primary" onclick="query()">查询</button>
						<button type="button" class="mui-btn mui-btn-danger">重置</button>
					</div>
				</div>
			</div>
			<!--查询结果-->
			<div class="mui-card">
				<div class="mui-card-header">
					查询结果
				</div>
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">基金名称:<span id="jjmc"></span></li>
						<li class="mui-table-view-cell">单位净值:<span id="dwjz"></span></li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//在自己的页面中需要手工把这个jsonpgz函数写一下
			function jsonpgz(data) {
				return(data);
			}

			$("#cxrq").click(function() {
				var dtpicker = new mui.DtPicker({
					type: "date", //设置日历初始视图模式
					beginDate: new Date(2018, 04, 25), //设置开始日期
					endDate: new Date(2018, 05, 27), //设置结束日期
					labels: ['年', '月', '日'], //设置默认标签区域提示语
				})
				dtpicker.show(function(e) {
					$("#cxrq").val(e);
				})
			})

			function query() {
				var code = $("#jjdm").val();
				var cxrq = $("#cxrq").val();
				var udate = new Date(cxrq).getTime(); //将dtpicker选择的日期转换成unix日期戳
				var url = "http://fundgz.1234567.com.cn/js/" + code + ".js?rt=" + udate; //拼接获取JSON的链接地址
				$.ajax({
					type: "get",
					//url: "http://fundgz.1234567.com.cn/js/002624.js?rt=1527344754062",
					url: url,
					dataType: "jsonp", //这个设置可以允许跨域调用js
					jsonpCallback: "jsonpgz", //这个很重要,是根据跨域目标服务器上返回的json数据中的函数起名
					success: function(data) {
						//alert(data.name);	//这里就可以将data当作是JSON对象来直接调用属性来使用了
						$("#jjmc").text(data.name);
						$("#dwjz").text(data.dwjz);
					}
				});
			}
		</script>
	</body>

</html>

效果图:

-------20180530更新HowBuy网站的基金收益查询API-------

API地址：

https://www.howbuy.com/fund/fundtool/calreturnajax.htm?code=002624&ds=20180511&act=2

code:基金代码

ds:查询日期(8位格式)

act:1无视ds参数返回最近一次的收益率和日期,格式:20180529,1.3880;2返回ds对应时间的收益率,格式:1.3730

使用MUI制作基金单位净值查询平台

猜你喜欢