增加一個額外的兩個變量來計數模擬器功能

Question

我已經創建了下面的小提琴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

這裏是更優雅，通用的，可配置的解決方案。

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>

Answer 2

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 3

這是怎麼回事？

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/