JSFiddle - React, Tailwind, and code Playground
HTML
<div id="echo"></div>
<div id="echo2"></div>
<div id="layer2"></div>
CSS
#layer2 {
position: absolute; /* Абсолютное позиционирование */
top: 60px; /* Положение от нижнего края */
left: 0px; /* Положение от правого края */
width: 10px;
height: 10px; background: #33FFCC;
}
JavaScript
var num = 1;
var SizeViewPort = document.documentElement.clientWidth;
var block = document.getElementById("layer2");
var left = window.getComputedStyle(block,null).getPropertyValue("left");
left = left.replace("px", "");
//document.getElementById('echo2').innerHTML=left;
// начать повторы с интервалом 1 сек
var timerId = setInterval(function(SizeViewPort, left) {
num = +num + +1;
document.getElementById('echo').innerHTML=num;
var css = document.getElementById("layer2");
css.style.left = num+'px';
document.getElementById('echo2').innerHTML=left;
}, 1000);
// через 5 сек остановить повторы
setTimeout(function() {
clearInterval(timerId);
//alert( 'стоп' );
document.getElementById('echo').innerHTML='стоп';
}, 10000);