JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output"></div>

CSS

#output {
    font-family: Helvetica;
    font-size: 250px;
    font-weight: bold;
    text-align: center;
}

JavaScript

var output = $('#output');

var counter = 0;

var direction = true;

var delay = 1000; 

var timer;

function startClock() {
 
  makeRandomColor();
    
  timer = setInterval( onTimer, 20);
    
}

function onTimer() {
          
    output.text(counter);
   
    counter = (direction) ? counter+1: counter-1;

    if(counter > 255) {
        
       clearInterval(timer);
      
       direction = false;
        
       pauseThenStart();
       
    } else if(counter < 0) {
        
        clearInterval(timer);
       
        direction = true;
        
        pauseThenStart();
    }
    
}

function pauseThenStart() {
    
    setTimeout( startClock, delay);
    
}

function makeRandomColor() {
    var r = Math.ceil(Math.random()*255);
    var g = Math.ceil(Math.random()*255);
    var b = Math.ceil(Math.random()*255);
    
    $('body').css('background','rgb('+r+','+g+','+b+')');
    
}

startClock();