JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="wasseruhr">
  <div class="dig_wrapper">  
    <div data-dig="4" class="dig pre_komma">0</div>
    <div data-dig="3" class="dig pre_komma">0</div>
    <div data-dig="2" class="dig pre_komma">0</div>
    <div data-dig="1" class="dig pre_komma">0</div>
    <div data-dig="0" class="dig pre_komma">0</div>
    <div data-dig="0" class="dig post_komma">0</div>
    <div data-dig="1" class="dig post_komma">0</div>
  </div>
  <div class="marker_1">
    WG
  </div>
  <div class="marker_2">
    m³
  </div>
</div>

SCSS

body{
  background: white;
}

.wasseruhr{
  background: lightgray;
  //background-image: url('https://haustechnik-wissen.de/wp-content/uploads/2016/06/Wasseruhr-Ziffernblatt.jpg');
  background-size: 740px 640px;
  background-position-x: right -120px;
  background-position-y: top -80px;
  height: 500px;
  width: 500px;
  display: block;
  margin: auto;
  border-radius: 50%;
  border: 20px solid blue;
  
  .marker_1{
    position: relative;
    width: 80px;
    height: 80px;
    background: lightgray;
    border-radius: 50%;
    border: 2px solid black;
    display: flex;
	  flex-direction: row;
	  align-items: center;
    justify-content: center;
    font-family: 'Arial';
    font-size: 30px;  
    top: 178px;
    left: 48px;
  }
  .marker_2{
    position: relative;
    font-family: 'Arial';
    font-size: 35px;
    left: 450px;
    top: 26px;
  }
  .dig_wrapper{
    position: relative;
    display: flex;
	  flex-direction: row;
	  align-items: center;
    gap: 11px;
    top: 122px;
    left: 75px;
    
    .dig{
      font-family: 'Arial';
      font-size: 50px;   
      border: 2px solid black;
    }
    
    .post_komma{
      color: red;
    }
  }
}

JavaScript

let start = 123456/100;
let add_v = 1/100;
setInterval(function(){
  
  start += add_v;
  //start = Math.round(start * 100) / 100;  
  start = parseFloat(parseFloat(start).toFixed(2));
  
  start_str = String(start);
  let dig = start_str.split(".");
  
  
  let pre = String(dig[0]).split("");
  let post = String(dig[1]).split("");
  
  pre_rev = pre.reverse();

  $(".pre_komma").each(function(k,v){
		let digit_k = $(this).data('dig');
    let dogit_v = pre_rev[digit_k];
    if(dogit_v === undefined){
    	$(this).text("0");
    }else{
    	$(this).text(dogit_v);
    }
  });
  
    $(".post_komma").each(function(k,v){
		let digit_k = $(this).data('dig');
    let dogit_v = post[digit_k];
    if(dogit_v === undefined){
    	$(this).text("0");
    }else{
    	$(this).text(dogit_v);
    }
  });
  
}, "1000");