JavaScript实现自定义基金涨跌网页
- 自定义基金涨跌网页,可以根据需要自己添加基金代码即可。
- 使用免费的基金api
- 如果有个人网站或者GitHub的,可以部署到网站和GitHub上,随时随地查看基金涨跌情况。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Funds</title>
<linkrel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
</head>
<body style="padding-top: 20px">
<div class="d-flex justify-content-center">
<div class="col-sm-8 col-md-10 col-lg-9 align-self-center">
<h2 class="text-md-center">Funds</h2>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">代码</th>
<th scope="col">名称</th>
<th scope="col">日期</th>
<th scope="col">单位净值</th>
<th scope="col">涨跌</th>
</tr>
</thead>
<tbody id="tbMain">
</tbody>
</table>
</div>
</div>
<script>
let tbody = document.getElementById("tbMain");
// 这里设置需要的基金代码
let code = ["009484", "003096", "013128", "320007", "005693", "012323"];
let url = 'https://api.doctorxiong.club/v1/fund?code=' + code.join();
fetch(url).then(response => response.json()).then(function (data) {
let number = 1;
[...data.data].map(function (x) {
let tr = document.createElement("tr");
tr.innerHTML = '<td>' + number + '</td>' +
'<td>' + x.code + '</td>' +
'<td>' + x.name + '</td>' +
'<td>' + x.expectWorthDate + '</td>' +
'<td>' + x.expectWorth + '</td>' +
'<td>' + x.expectGrowth + '</td>'
tr.style.color = x.expectGrowth > 0 ? 'red' : 'green';
tbody.appendChild(tr);
number++;
})
})
</script>
</body>
</html>
```
免费接口应该不稳定 - API接口说明:https://www.doctorxiong.club/api
- 这个免费每小时100次,正常用应该够用 感觉这单位净值可以弄成,今日估值和昨天净值的对比 感谢分享!
页:
[1]