Javascript:多次使用countup-function

时间:2018-04-17 11:34:29

标签: javascript function codepen

任何人都可以帮助我。

我发现这个好的计数脚本: https://codepen.io/alemarengo/pen/mOWqwy

现在我想多次为同一站点上的其他元素调用此函数。但是设置不同。

 start += 0.125;

例如,设置从0.125到5.25的加法。

提前感谢您!

1 个答案:

答案 0 :(得分:0)

这是一种可能的方法:使用不同的参数实例化不同的go函数:



var start = {
  "counter-1": 7500000,
  "counter-2": 1500000
};
var speed = 1000;
$(document).ready(function() {
  launch("counter-1", 1.5);
  launch("counter-2", 100)
});

function launch(elem, increment) {
  var go = goFactory(elem, increment)
  go();
  setInterval(go, speed);
}

function goFactory(elemId, increment) {
  function go() {
    $("#" + elemId).html(start[elemId].toFixed(0));
    start[elemId] += increment;
  }

  return go;
}

div {
  font-weight: normal;
  letter-spacing: 5px;
  padding: 6px;
  font-size: 1.8em;
  font-family: 'Gill Sans';
  width: 500px;
  text-align: center;
  height: auto;
  color: #333;
  display: block;
  margin: 0px auto;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Contatore</title>
</head>

<body>
  <div id="counter-1"></div>
  <div id="counter-2"></div>
</body>

</html>
&#13;
&#13;
&#13;