如何为值添加计数答案

【问题标题】：How do I add a countup to values如何为值添加计数
【发布时间】：2020-04-06 12:55:19
【问题描述】：

如标题所述，如何为以下项目添加计数动画：检测呈阳性人口死亡人数检测呈阳性的人的死亡百分比最后更新日期

这些数字是动态的而不是静态的，这就是我迷路的地方。

感谢您的帮助。抱歉，我不熟悉使用 Javascript、Json 和 API 进行编码。

window.addEventListener("load", function() {
  document.getElementById("countrySel").addEventListener("change", getCovidStats);
  document.getElementById("countrySel").value = "169";
  getCovidStats()
})

function getCovidStats() {
  const cc = document.getElementById("countrySel").value;
  if (cc === "") return;

  fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/' + cc)
    .then(function(resp) {
      return resp.json()
    })
    .then(function(data) {
      let population = data.location.country_population;
      let update = data.location.last_updated;
      let confirmedCases = data.location.latest.confirmed;
      let deaths = data.location.latest.deaths;

      document.getElementById('inwoners').innerHTML = population.toLocaleString('en');
      document.getElementById('update').innerHTML = update.substr(0, 10);
      document.getElementById('patienten').innerHTML = confirmedCases.toLocaleString('en');
      document.getElementById('doden').innerHTML = deaths.toLocaleString('en');
      document.getElementById('procent').innerHTML = ((Number(deaths) / Number(confirmedCases)) * 100).toLocaleString("en", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }) + "%";
    })
    .catch(function() {
      console.log("error");
    })
  setInterval(getCovidStats, 43200000) // update every 12 hours
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

h1,
h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-bottom: 20px;
  font-size: 250%;
}

.subtitle,
.over {
  padding: 20px;
  font-size: 150%;
}

body {
  background-color: #FFDC56;
}

div {
  padding: 20px;
}


/* Add a black background color to the top navigation */

.topnav {
  background-color: #005A9C;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 75%;
}

.logo {
  float: left;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #FFDC56;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.stats-container {
  text-align: center;
  float: right;
  display: inline-block;
}

.location-container {
  display: inline-block;
}

.data-container {
  border: 2px solid #005A9C;
  margin-right: 30%;
  margin-left: 30%;
}

h4,
{
  font-size: 85%;
  color: gray;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
}

.over {
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  text-align: center;
}

.footer {
  font-family: 'Roboto', sans-serif;
  bottom: 0;
  font-size: 75%;
  padding: 5px;
}

.maatregelen {
  width: 35%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.maatregelen-caption {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 80%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Coronavirus Statistieken</title>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="masker-emoji.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript" src="loader.js"></script>

</head>

<body>
  <div class="topnav">
    <h1 class="logo">Coronavirus</h1>
    <a href="over.html">about</a>
    <a class="active" href="index.html">stats</a>
  </div>

  <h2 class="subtitle">Title</h2>
  <div class="data-container">
    <div class="stats-container">
      <h4>Tested positive</h4>
      <h1 id="patienten"></h1>
      <h4>Deaths</h4>
      <h1 id="doden"></h1>
      <h4>Percentage of deaths of positive tested people</h4>
      <h1 id="procent"></h1>
    </div>
    <div class="location-container">
      <h4>country</h4>
      <h1 id="country"><label for="countrySel">Country:</label>
        <select id="countrySel">
          <option value="169">???????? </option>
          <option value="120">???????? </option>
          <option value="116">???????? </option>
          <option value="201">???????? </option>
          <option value="137">???????? </option>
          <option value="187">???????? </option>
          <option value="143">???????? </option>
          <option value="225">???????? </option>
        </select>
      </h1>
      <h4>population</h4>
      <h1 id="inwoners"></h1>
      <h4>updated on</h4>
      <h1 id="update"></h1>
    </div>
  </div>
  <h1 class="footer">Footer</h1>
</body>

</html>

【问题讨论】：

为此有现成的库，例如countUp.js。此外，您每次调用该函数时都会设置一个新的时间间隔。间隔会堆积起来。你应该只使用setTimeout()

标签： javascript html json animation css-animations

【解决方案1】：

我为你做了这个

在 sn-p 输出中很难看到 - 进入全屏并切换到另一个国家

let tId;
window.addEventListener("load", function() {
  document.getElementById("countrySel").addEventListener("change", getCovidStats);
  document.getElementById("countrySel").value = "169";
  getCovidStats()
})

function countUp() {
  cnt += 300;
  let done = 0;
  let iMax = +document.getElementById('inwoners').getAttribute("max");
  if (cnt < iMax) document.getElementById('inwoners').innerText = cnt.toLocaleString('en');
  else done++
    let pMax = +document.getElementById('patienten').getAttribute("max");
  if (cnt < pMax) document.getElementById('patienten').innerText = cnt.toLocaleString('en');
  else done++
    let dMax = +document.getElementById('doden').getAttribute("max");
  if (cnt < dMax) document.getElementById('doden').innerText = cnt.toLocaleString('en');
  else done++



    document.getElementById('procent').innerHTML = ((Number(document.getElementById('doden').innerText.replace(/\D/g, "")) / Number(document.getElementById('patienten').innerText.replace(/\D/g, ""))) * 100).toLocaleString("en", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }) + "%";
  if (done === 3) clearInterval(tId);
}


function getCovidStats() {
  const cc = document.getElementById("countrySel").value;
  if (cc === "") return;

  fetch('https://coronavirus-tracker-api.herokuapp.com/v2/locations/' + cc)
    .then(function(resp) {
      return resp.json()
    })
    .then(function(data) {
      let population = data.location.country_population;
      let update = data.location.last_updated;
      let confirmedCases = data.location.latest.confirmed;
      let deaths = data.location.latest.deaths;

      document.getElementById('inwoners').innerText = population.toLocaleString('en');
      document.getElementById('update').innerText = update.substr(0, 10);
      document.getElementById('patienten').innerText =
        document.getElementById('patienten').setAttribute("max", confirmedCases)
      document.getElementById('doden').innerText = 0;
      document.getElementById('doden').setAttribute("max", deaths)
      document.getElementById('procent').innerText = 0 + "%"
      cnt = 0;
      tId = setInterval(countUp, 10);
    })
    .catch(function() {
      console.log("error");
    })
  setInterval(getCovidStats, 43200000) // update every 12 hours
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  width: 100%;
}

h1,
h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-bottom: 20px;
  font-size: 250%;
}

.subtitle,
.over {
  padding: 20px;
  font-size: 150%;
}

body {
  background-color: #FFDC56;
}

div {
  padding: 20px;
}


/* Add a black background color to the top navigation */

.topnav {
  background-color: #005A9C;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
  font-size: 75%;
}

.logo {
  float: left;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #FFDC56;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.stats-container {
  text-align: center;
  float: right;
  display: inline-block;
}

.location-container {
  display: inline-block;
}

.data-container {
  border: 2px solid #005A9C;
  margin-right: 30%;
  margin-left: 30%;
}

h4,
{
  font-size: 85%;
  color: gray;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  text-align: center;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
}

.over {
  font-family: 'Roboto', sans-serif;
  font-size: 100%;
  text-align: center;
}

.footer {
  font-family: 'Roboto', sans-serif;
  bottom: 0;
  font-size: 75%;
  padding: 5px;
}

.maatregelen {
  width: 35%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.maatregelen-caption {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 80%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Coronavirus Statistieken</title>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="masker-emoji.png">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="app.js"></script>
  <script type="text/javascript" src="loader.js"></script>

</head>

<body>
  <div class="topnav">
    <h1 class="logo">Coronavirus</h1>
    <a href="over.html">about</a>
    <a class="active" href="index.html">stats</a>
  </div>

  <h2 class="subtitle">Title</h2>
  <div class="data-container">
    <div class="stats-container">
      <h4>Tested positive</h4>
      <h1 id="patienten"></h1>
      <h4>Deaths</h4>
      <h1 id="doden"></h1>
      <h4>Percentage of deaths of positive tested people</h4>
      <h1 id="procent"></h1>
    </div>
    <div class="location-container">
      <h4>country</h4>
      <h1 id="country"><label for="countrySel">Country:</label>
        <select id="countrySel">
          <option value="169">?? </option>
          <option value="120">?? </option>
          <option value="116">?? </option>
          <option value="201">?? </option>
          <option value="137">?? </option>
          <option value="187">?? </option>
          <option value="143">?? </option>
          <option value="225">?? </option>
        </select>
      </h1>
      <h4>population</h4>
      <h1 id="inwoners"></h1>
      <h4>updated on</h4>
      <h1 id="update"></h1>
    </div>
  </div>
  <h1 class="footer">Footer</h1>
</body>

</html>

【讨论】：

【解决方案2】：

您有多种方法可以做到这一点。

每隔 n 秒拨打一次电话，以获取基于所选国家/地区的最新数据并更新计数。
将其设计为发布-订阅模式。更多信息在这里：https://www.enterpriseintegrationpatterns.com/patterns/messaging/PublishSubscribeChannel.html

我会选择上面的选项 2，因为它有很多优点，例如连接到该端点的所有浏览器都会得到更新、数据一致性等等。但是我们也必须考虑在那里放置一个持久的订阅者。该链接涵盖了很多好东西。

还有其他方法，请在这里分享！

【讨论】：