hollsovan 发表于 2023-1-14 18:32

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>
```

游水的猪 发表于 2023-1-15 10:29

免费接口应该不稳定

hollsovan 发表于 2023-1-15 11:08

- API接口说明:https://www.doctorxiong.club/api
- 这个免费每小时100次,正常用应该够用

撒旦の恶 发表于 2023-1-17 10:25

感觉这单位净值可以弄成,今日估值和昨天净值的对比

a725 发表于 2023-1-20 09:49

感谢分享!
页: [1]
查看完整版本: JavaScript实现自定义基金涨跌网页