Javascript calculator

Salutare!

Am un script in JS:

var START_DATE = new Date("January 1, 2017 00:00:00"); // data de start
var INTERVAL = 1;  // in secunde
var INCREMENT = 1400.53; // crestere per secunda
var START_VALUE = 1400.53; // valoare initiala
var count = 0;
window.onload = function() {
  var msInterval = INTERVAL * 1000;
  var now = new Date();

      count = parseInt(((now - START_DATE)/msInterval) * INCREMENT + START_VALUE);
      document.getElementById('counter').innerHTML = count;
      setInterval("count += INCREMENT; document.getElementById('counter').innerHTML = parseInt(count);", msInterval);

};

Acest script imi calculeaza cresterea economica per secunda de al inceputul anului 2017 dupa o anumita valoare.

Problema este in felul urmator: Detin 5 valori diferite, prima fiind 1400.53 dupa cum este adaptat si scriptul. Cum as putea sa folosesc pentru fiecare valoare acelasi cod fara sa multiplic scriptul, deci tot ce o sa se modifice o sa fie “var START_VALUE” si “var INCREMENT”!? Tinand cont de faptul ca o sa am 5 div-uri cu 5 id-uri diferite, pentru fiecare VALUE in parte.

Multumsc anticipat!

  1. Faci din scriptul tau o functie.
  2. Dai ca parametrii in div, data-start si data-increment.
  3. Apelezi functia pt fiecare div in parte.
1 Like

Imi poti arata un exemplu?

uite aici o explicatie frumoasa a “ce inseamna functiile in javascript si cu ce se mananca”

3 Likes

Multumesc frumos!

Poftim:

<html>
    <body>
        <div class="counter" id="counter-1" data-start="1400.53" data-increment="1400.53"></div>
        <div class="counter" id="counter-2" data-start="1500.53" data-increment="1500.53"></div>
        <div class="counter" id="counter-3" data-start="1600.53" data-increment="1600.53"></div>
        <div class="counter" id="counter-4" data-start="1700.53" data-increment="1700.53"></div>
        <div class="counter" id="counter-5" data-start="1800.53" data-increment="1800.53"></div>
    </body>

    <script>
    	(function() {

	        var START_DATE = new Date("January 1, 2017 00:00:00"); // data de start
		    var INTERVAL = 1;  // in secunde

	        [].slice.call(document.querySelectorAll('.counter')).forEach(function(item, pos) {
	        	var START_VALUE = parseFloat(item.getAttribute('data-start'));
	        	var INCREMENT = parseFloat(item.getAttribute('data-increment'));
                var count = 0;
		        var msInterval = INTERVAL * 1000;
	            var now = new Date();
	            count = parseInt(((now - START_DATE)/msInterval) * INCREMENT + START_VALUE);
	            item.innerHTML = count;

	            setInterval(function(){
	            	count += INCREMENT;
	            	item.innerHTML = parseInt(count);
	            }, msInterval);
	        });

        })();
    </script>
</html>

Sper ca te coafeaza. :grinning:

4 Likes

Aperciez foarte mult. Iti multumesc!

scopul era sa invete sa faca singur, ca din solutii mura-n gura nu inveti mare lucru

Pe stackoverflow se procedeaza la fel, eu am invatat din raspunsurile lor, am testat parti din codul lor, am inteles exact ce au facut acolo. Pe langa asta, am vazut metode diferite de a rezolva o anumita problema.
Dar, sunt sigur ca tu ai restrictie pe stackoverflow, din fisierul hosts, ca sa nu faci decat ca tine, sa nu iei mura in gura de la nimeni, sa nu dormi noptile pana nu gasesti algoritmul potrivit.
Multumesc de primire, tocmai ce mi-am facut si eu cont aici. :joy:
Nu ma lua in seama, sunt ironic.

Codul tău abia dacă îl înţeleg eu, d-apăi un începător care nu ştie ce-i aia funcţie… Tot timpul m-au exasperat jdemiile de moduri in care poti sa definesti o functie in js :slight_smile:

[].slice.call(document.querySelectorAll('.counter')).forEach(function(item, pos) { ... });

Am facut un array in care am introdus fiecare div.counter, dupa care foreach-ul ca sa apelez codul lui pe fiecare div.counter diferit. Este cel mai usor mod in cazul in care lucrezi vanilla js, daca utiliza jquery era mult mai usor.
Dupa care am tras niste variabile din div-urile lui, ca sa poata face ceva dinamic, in cazul in care preia datele din DB.
Ce e asa greu ? Nici nu ai stat sa analizezi putin codul sa vezi ca este ceva banal, tu doar ti-ai dat cu parerea …
Nu toti oamenii sunt facuti sa fie programatori, daca nu intelegi tu, inteleg altii care sunt facuti pentru asa ceva, care isi doresc mai mult.

2 Likes

Da bre, ţi-ai făcut o intrare triumfală. Sunt sigur ca cineva care nu ştie precis ce este o funcţie “normală” va şti ce-i aia funcţie lambda :slight_smile:

2 Likes

@zshare mulțumim că ai decis să intri în comunitatea DevForum și apreciem că ai sărit în ajutorul membrilor!

Dar, dacă îmi permiți, vreau să fac niște remarci la ce ai scris. Cu toții suntem pe DevForum pentru a învăța ceva, iar răspunsul tău ar fi avut și valoare educativă dacă ai fi comentat/explicat anumite bucăți din cod.

Pe de altă parte nici un programator nu știe. Toți au învățat la un moment dat. Atunci când ești la început, cele mai banale lucruri pot fi extrem de frustrante, iar o soluție fără explicații nu va duce decât la copy/paste, mai ales dacă vine după câteva ore de încercări eșuate.

2 Likes

Btw, ca fapt divers:

[].slice.call(NodeList/HTMLCollection) poate fi inlocuit cu :

Array.from(NodeList/HTMLCollection)

sau cu ES6 :

[...NodeList/HTMLCollection]

1 Like

Nu si-a dat nimeni seama ca eu am creat nodelist-ul degeaba, document.querySelectorAll(’.counter’) oricum crea array-ul pentru a parcurge fiecare div.counter in parte. :joy:

[].slice.call(document.querySelectorAll('.counter')).forEach(function(item, pos) { ... }

este “identic” cu

document.querySelectorAll('.counter').forEach(function(item, pos) { ... }

Presupun ca acum nu mai sunt probleme, totul este banal. Bafta !

forEach n-are cum sa mearga pe un NodeList: (cel putin in Chrome)

E iterable (adica merge cu for … of), dar n-are metoda forEach.