向计数模拟器函数添加额外的两个变量

Question

我创建了以下 fiddle https://jsfiddle.net/jnoweb/v421zzbe/2/

目前它有一个变量使所有三个 ID 都计数为 20：

  var game = {score:0},

scoreDisplay = [
  document.getElementById("score1"),
  document.getElementById("score2"),
  document.getElementById("score3")];

function add20() {
  TweenLite.to(game, 1, {score:"+=20", roundProps:"score", onUpdate:updateHandler, ease:Linear.easeNone});
}

function updateHandler() {
  scoreDisplay.forEach(function(display) {
    display.innerHTML = game.score;
  });
}

add20();

我想更改此设置，以便每个 ID 都计为不同的值，例如 16、18 和 20！

有人知道如何实现吗？

Answer 1

 var game = {
      score1: 0,
      score2: 0,
      score3: 0
  },

scoreDisplay = [
  document.getElementById("score1"),
  document.getElementById("score2"),
  document.getElementById("score3")
];

function add(scoreIndex, numToAdd) {
  TweenLite.to(game, 1, {score:("+="+numToAdd), roundProps: ("score" + scoreIndex), onUpdate:updateHandler, ease:Linear.easeNone});
}

function updateHandler() {
  scoreDisplay.forEach(function(display, i) {
     var key = ("score" + (i+1))
     display.innerHTML = game[key];
  });
}

add(1 , 16); 
add(2 , 18); 
add(3 , 20);

Answer 2

这个呢？

  var game = {
    score1:0,
    score2:0,
    score3:0
  },

    scoreDisplay = [
      document.getElementById("score1"),
      document.getElementById("score2"),
      document.getElementById("score3")];

    function add20() {
      TweenLite.to(game, 1, {score1:"+=16", score2:"+=18", score3:"+=20", roundProps:"score", onUpdate:updateHandler, ease:Linear.easeNone});
    }

    function updateHandler() {
      scoreDisplay.forEach(function(display, key) {
        var score = scoreDisplay[key].id;
        display.innerHTML = game[score];
      });
    }

    add20();

https://jsfiddle.net/hundma4g/

Answer 3

这是更优雅、通用、可配置的解决方案。

  function ScoreDisplay(id, increment) {
    this.elm = document.getElementById(id);
    this.inc = increment;
    this.game = {score: 0};
  }
  
  ScoreDisplay.prototype = {
     update: function(){
        this.elm.innerHTML = this.game.score;
     }
  };
  
  var scoreDisplay = [];
  scoreDisplay.push(new ScoreDisplay('score1', 16));
  scoreDisplay.push(new ScoreDisplay('score2', 18));
  scoreDisplay.push(new ScoreDisplay('score3', 20));

    function addScore() {
      scoreDisplay.forEach(function(sd) {
      TweenLite.to(sd.game, 1, {score: "+=" + sd.inc, roundProps:"score", onUpdate:sd.update.bind(sd), ease:Linear.easeNone});
      });
    }

    addScore();

 #score1 {
            position: relative;
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
            text-align: center;
            background-color: transparent;
            color: $white;
            border-radius: 20px 20px;
            top: -11px;
            left: -42px;
          }
          #score2 {
            position: relative;
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
            text-align: center;
            background-color: transparent;
            color: $white;
            border-radius: 20px 20px;
            top: -11px;
            left: -42px;
          }

          #score3 {
            position: relative;
            font-size: 30px;
            font-weight: bold;
            padding: 20px;
            text-align: center;
            background-color: transparent;
            color: $white;
            border-radius: 20px 20px;
            top: -11px;
            left: -42px;
          }

<!--TweenLite/TweenMax GSAP-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/RoundPropsPlugin.min.js"></script>

      <div id="prodArrow"></div>
      <div id="prodCount">
        <div id="score1"></div>
          
      </div>

      <div id="testArrow"></div>
      <div id="testCount">
        <div id="score2"></div>

      </div>

      <div id="devArrow"></div>
      <div id="devCount">
        <div id="score3"></div>

      </div>

向计数模拟器函数添加额外的两个变量

Adding an extra two variables to a count simulator function

javascript

gsap