setInterval i doliczanie liczb całkowitych zaleznych od zmiennoprzecinkowych liczb

Question

Witam :) Mam mały problem polegający z moim kodem. Piszę w angularze ale to tylko małe różnice względem ts a tu o sposób chodzi ! Chciałbym aby nie wyświetlały mi się liczby po przecinku a same liczby całkowite . Nakreślę wam mniej więcej ów kod(

a = 20000
b = 1
c = 0.001

setInterval(() => {

    a  = (
    a +  b +  b *c) ;
    }, 1000); }


//w htmlu wywołuje to w ten sposób:
{{a}}

"b" jest to zmienna która po kliknięciu się zwiększa o 1 a "c" o 0.001, ale można przyjąć że to stała. Problem w tym że po zwiększeniu "c" dodaj mi owe 0.001 do wyniku co sekundę, a nie po 1000 sekund dodaje 1

Próbowałem Math.floor, .ceil , .round, ale to nie chodzi o zaokrąglanie w góre czy w dół, ale o ..."patrz powyżej" :P

Jeśli znacie jakiś prosty sposób, aby dodawało mi "wewnątrz" te liczby po przecinku a po osiągnięciu liczby całkowitej dodawało tę liczbę byłbym bardzo wdzięczny.

P.S.
Wybaczcie, że dałem streszczenie kodu - mogę dać cały ale to są 2 komponenty i 3-4 servisy więc nie widzę sensu. Jeśli inaczej uważacie to napiszcie bym dodał to dodam. A no i oczywiście przepraszam, że w js wklejam ten post z angulara ale nie wiedziałem gdzie ...

Comments

"b" jest to zmienna która po kliknięciu się zwiększa o 1 a "c" o 0.001, ale można przyjąć że to stała. Problem w tym że po zwiększeniu "c" dodaj mi owe 0.001 do wyniku co sekundę, a nie po 1000 sekund dodaje 1

Nie rozumiem, możesz jaśniej?

---

@Krzysiek Gach, możesz pokazać kilka przykładów sumowanych wartości i wyniku, które chcesz otrzymać? Np. z 20000 + 1 + 0.001 (ostatnia wartość jako liczba całkowita będzie 0) chcesz otrzymać 20001?

---

@Krzysiek Gach,

Hmmm ... myślałem że da się pominąc wklejanie całego kodu ale może dzieki niemu będzie wam łatwiej zrozumieć o co mi chodzi:

W pierw jednak pokażę wam strukturę projektu: 

miedz/

       levelMiedzi/

              levelMiedzi.service

       zadaniMiedz/

              mnoznik.service

              zadania-miedz.ts

              zadania-miedz.html

       zasoby/

              zasoby.service

       miedz.ts

       miedz.html

Już tłumaczę - najpierw stworzyłem komponent "miedz" a w nim stworzyłem service "zasoby" i "level". Następnie stworzyłem w kompoencie "miedz", komponent "zadanie" i w nim stworzyłem service "mnoznik".A o to i kody :

to jest  miedz.ts

import { Component, OnInit } from '@angular/core';
import { LevelMiedziService } from './level/level-miedzi.service';
import { ZasobyMiedziService } from './zasoby/zasoby-miedzi.service';
import { Zadanie1Service } from 'src/app/przedmioty/matematyka/zadanie/zadanie1.service';

@Component({
  selector: 'app-miedz',
  templateUrl: './miedz.component.html',
  styleUrls: ['./miedz.component.css']
})
export class MiedzComponent implements OnInit {



  constructor(
    public levelMiedzi: LevelMiedziService,
    public zasobMiedzi: ZasobyMiedziService,

    public zadania1servis: Zadanie1Service,
  ) {
}
    cos: number;
  ngOnInit(): void {

  }
  podwyzszLewelMiedzi(){
    if (this.zasobMiedzi.zasobMiedzi > this.levelMiedzi.levelMiedzi * 2000){
      this.zasobMiedzi.zasobMiedzi =
      this.zasobMiedzi.zasobMiedzi -
      (this.levelMiedzi.levelMiedzi * 2000 + 2000);
      this.levelMiedzi.podwyzszLevel();

  }
}

}

a to miedz.html

<header class="boxik">
    <div class="miejsceObrazkaIDanych">
        <p class="zasobyMiedzi">{{zasobMiedzi.zasobMiedzi}}</p>
        <button (click)="podwyzszLewelMiedzi()"><img class="zdjecieMiedzi" src="/assets/kpalnia_soli3.jpg"  alt=""></button>
        <p class="levelKopalniMiedzi">  {{levelMiedzi.levelMiedzi}}</p> 
        <div class="opisMiedzi"><span class="miedz">
            Sól warzona</span>  – rodzaj soli kuchennej
                otrzymywany w warzelniach przez 
                oczyszczenie soli kamiennej. 
                Zawiera co najmniej 99,9% chlorku sodu.
                <br><br>
                Sól warzona jest stosowana jako 
                przyprawa, składnik wielu przetworzonych 
                produktów spożywczych, a także w 
                urządzeniach zmiękczających wodę.
                Jej wartość spożywcza jest pogorszona
                o brak mikroelementów występujących 
                w naturalnej soli kamiennej, natomiast
                smak poprawiony, bardziej słony w 
                porównaniu z solą kamienną, która może 
                mieć posmak gorzkawy.
                <br><br>
                Sól warzona jest czasami 
                sztucznie wzbogacana w związki jodu.
        </div>
        <app-zadania-miedzi></app-zadania-miedzi>        <!-- <app-zadania-soli ></app-zadania-soli> -->
    </div>
</header>

to jest level.servis.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LevelMiedziService {
  public levelMiedzi = 0;

  constructor() { }

  podwyzszLevel(){
    this.levelMiedzi += 1;
    return this.levelMiedzi;
  }
}

to jest mnoznik.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MnoznikZaWiedzService {
 public mnoznik = 0;
  constructor() { }

}

to jest zadanie.ts 

import { Component, OnInit } from '@angular/core';
import { Zadanie1Service } from 'src/app/przedmioty/matematyka/zadanie/zadanie1.service';
import { ZasobyMiedziService } from '../zasoby/zasoby-miedzi.service';
import { LevelMiedziService } from '../level/level-miedzi.service';
import { Zadanie2Service } from 'src/app/przedmioty/matematyka/zadanie/zadanie2.service';
import { MnoznikZaWiedzService } from './mnoznik-za-wiedz.service';

@Component({
  selector: 'app-zadania-miedzi',
  templateUrl: './zadania-miedzi.component.html',
  styleUrls: ['./zadania-miedzi.component.css']
})
export class ZadaniaMiedziComponent implements OnInit {

  pusto1 = '';
  zrobiles = '';
  pokazZadanie: boolean;
  z1 = false;
  z2 = false;

  constructor(
              public zasobyMiedzi: ZasobyMiedziService,
              public levelMiedzi: LevelMiedziService,
              public zadania1servis: Zadanie1Service,
              public zadania2servis: Zadanie2Service,
              public mnoznik: MnoznikZaWiedzService,
    ) { }

  ngOnInit(): void {
  }
  wypisz(){
    this.pokazZadanie = !this.pokazZadanie;
  }
  zadanie1(){
    if (this.z2 === true ){
        this.z2 = !this.z2;
    }
    else if (this.z1 === false){
        this.z1 = !this.z1;
    }
  }
  zadanie2(){
    if (this.z1 === true ){
      this.z1 = !this.z1;
  }
  else if (this.z2 === false){
      this.z2 = !this.z2;
  }
  }

  sprawdzam1(wynik: string) {
    console.log('wynik: ', wynik);

    if (Number(wynik) === this.zadania1servis.c) {
      console.log('OK', this.zadania1servis.obliczenia1());
      this.zasobyMiedzi.dodajZasobyMiedz();
      this.zadania1servis.obliczenia1();
      this.zrobiles = 'Dobrze!';
      this.mnoznik.mnoznik += 0.001;
      console.log(this.mnoznik);
      // this.zasobyMiedzi.;
      this.pusto1 = '';
    } else {
      console.log('ZLE');
      this.zrobiles = 'Źle :(';
      this.pusto1 = '';
    }
  }
  sprawdzam2(wynik: string) {
    console.log('wynik: ', wynik);

    if (Number(wynik) === this.zadania2servis.c) {
      console.log('OK', this.zadania2servis.obliczenia2());
      this.zasobyMiedzi.dodajZasobyMiedz2();
      this.zadania2servis.obliczenia2();
      this.zrobiles = 'Dobrze!';
      this.mnoznik.mnoznik += 0.002;
      console.log(this.mnoznik);
      this.pusto1 = '';
    } else {
      console.log('ZLE');
      this.zrobiles = 'Źle :(';
      this.pusto1 = '';
    }
  }
}

a to jest zadanie.html

<div class="zadanie">
    <button (click)="wypisz()" class="rel">dodaj surowce</button>
    
    <div class="lepszeLiczby" *ngIf="pokazZadanie">
        <button class="zad" type="radio" name="zadanie" (click)="zadanie1()" (click)="zadania1servis.obliczenia1()">wynik ma być maksymalnie 10 </button>
        <button class="zad" type="radio" name="zadanie" (click)="zadanie2()" (click)="zadania2servis.obliczenia2()">wynik ma byc maksymalnie 50</button>
        <!-- <button (click)="zadanie1()"></button> -->
            <div *ngIf="z1">
                <p class="dodawaj">Magazynierzy mają problem z dodawaniem surowców. Pomóż im aby mogli dodać do twoich surowców trochę soli<br></p>
                <p class="oblicz">{{ zadania1servis.x }} + {{ zadania1servis.y }} = <input (keyup.enter)="sprawdzam1(wynik.value)" class="wynik" #wynik (ngModel)="zrobiles" [(ngModel)]="pusto1">
            
                <button #wynikBtn (click)="sprawdzam1(wynik.value)">Sprawdzam</button></p>
                <div class="zrobiles">{{zrobiles}}</div>
            </div>
            <div *ngIf="z2">
                <p class="dodawaj">aaaaMagazynierzy mają problem z dodawaniem surowców. Pomóż im aby mogli dodać do twoich surowców trochę soli<br></p>
                <p class="oblicz">{{ zadania2servis.x }} + {{ zadania2servis.y }} = <input (keyup.enter)="sprawdzam2(wynik.value)" class="wynik" #wynik (ngModel)="zrobiles" [(ngModel)]="pusto1">
            
                <button #wynikBtn (click)="sprawdzam1(wynik.value)">Sprawdzam</button></p>
                <div class="zrobiles">{{zrobiles}}</div>
            </div>
    </div>
</div>

powinno i wam pójść jeśli wkleicie to do swojego angulara. Już odpisuje na powyższe posty

---

@Lewo Wybacz, że tak mało ściśle się wyraziłem. Chodzi w moim skrypcie o to, żeby zwiększało owe "a" o "1" po "wydodawaniu" wewnątrz "0.001" - czyli po pierwszej sekundzi powinno dodać 0.001 (ale jej nie wyświetlać) , po drugiej sekundzie, powinno dodać 0.002, i tak dalej, aż dojdzie do "1" (czyli po 1000 sekundach) i tą "1" powinno dodać. Jednak stosując Math'y (czy to floor czy ceil czy round) od razu zaokrągla, więc 20000.001 = 20001.

---

@JSHolic,

A więc te 1 to pomińmy bo ona to nam w ogóle nie potrzebna. Istota leży tylko w tej 0.001. 

po pierwszej sekundzie jest 20000.001

po drugiej - ~20000.002

po trzeciej -~20000.003

itd. 

Nie chodzi też o to, że mam na ekranie wyświetlone po drugiej sek. 20000.001999998, bo to żaden problem (to przyjmuje jako "dziwność" która przejdzie. Może kiedyś będę się nad nią głowił (ale chyba wystarczy Matha jakiegoś zastosować) ale nie teraz), tylko że widzę te 20000.002, 20000.003,... 

---

Czyli chcesz w zmiennej trzymać wartość dodawania bez zaokrąglania, a wyświetlać w inny sposób?

---

Dokładnie.

W zmiennej ma się generować dodawanie 0.001 a ma się wyświetlić dopiero po osiągnięciu 1.

Powinienem zastosować setInterval dla "mnoznika" (czyli "c") ?

---

Czyli samo dodawanie ma się dziać bez zaokrągleń, ale wyświetlać z zaokrągleniem dopiero po przejściu odpowiedniej liczbie iteracji sumujących?

To czemu nie stworzysz drugiej zmiennej, w której będziesz umieszczać zaokrągloną wartość i ją wyświetlisz, a tę oryginalną będziesz wykorzystać do sumowania (już bez zaokrągleń)?

---

Chyba o to by mi chodziło ... przepraszam, że zawróciłem Ci głowę taką głupotą... :/

Dziękuję za wsparcie i szybką odpowiedz :)

Pozdrawiam