Creation of web page to show numbers with intervals-CodePudding

does anyone know how to make a WEB PAGE that shows numbers from, for example, 1 to 100 and that when it reaches 100 it resets to 1 again? and that you can change the time between number and number.

Using html, javascript or anything that was needed. Thx :)

CodePudding user response：

Did you mean something like that?

let countArea = document.getElementById('count-area');
let speedInput = document.getElementById('speed');
let speed = Number(speedInput.value);

function setSpeed() {
  speed = Number(speedInput.value)
}

function count() {
  if (100 > Number(countArea.textContent)) {
    countArea.textContent = Number(countArea.textContent)   1;
  } else {
    countArea.textContent = 0;
  };
  setTimeout(count, speed)
}
count()
speedInput.addEventListener('change', setSpeed)

<!doctype html>
<html>

<head>
  <title>Number counter</title>
</head>

<body>
  <p id="count-area">0</p>
  <input type="range" id="speed" min="50" max="1000">
</body>

</html>

CodePudding user response：

I'm not sure I understand what you mean. If you mean just a script that writes numbers from 1 to 100 multiple times this can work:

<div id='somediv'></div>
<script>
var times = 4;

for (var n=1;n<times;n  ){
    for (var i=1;i<101;i  ){
    somediv.innerHTML ='<br>' i

    }
}
</script>

To set delay between them can add timeout like here: https://www.w3schools.com/jsref/met_win_settimeout.asp Depending in what way you want that delay, the rest will be different.

To change how many times it will write 1-100 change the value of 'times', currently it will write it 1 time less then the number(so 3 times), can change that as well.

Edit: Aha!Ok so this can do something similar:

<div id='somediv'></div>


<script>
setInterval(displayCounter, 1000);
var i=0;
function displayCounter() {
    
  document.getElementById("somediv").innerHTML = i;
  i=i 1;
  if (i==100){i=1};
}
</script>

It will cycle from 0 to 100, then start from 0 again. Currently its 1 second apart(1000 miliseconds). You can make it more or less by changing the 1000 to something else(3000 will be 3 seconds).

Edit 2:

{<br>
"number":"<span id='somediv'></span>"<br>
}

<script>
setInterval(displayCounter, 100);
var i=0;
function displayCounter() {
    
  document.getElementById("somediv").innerHTML = i;
  i=i 1;
  if (i==100){i=1};
}
</script>

If you want it to start from 1 change: var i=0; to var i=1;

If you want it to be to more or less then 100 change: if (i==100)... to 50 for example would be: if (i==50)...

And can't think of anything more. For style can use css on #somediv.

Edit 3:

{<br>
"number":"<span id='somediv'></span>"<br>
}

<script>
setInterval(displayCounter, 1000);

var i = new Date().getSeconds();


function displayCounter() {
    
  document.getElementById("somediv").innerHTML = i;
  i=i 1;
  if (i==100){i=1};
}
</script>

This will start the counter(1-100) from the current seconds of the clock. I'm not sure it will be the same for everyone, though, browser may load slower in some places or other factors.

Edit 4:

{<br>
"number":"<span id='somediv'></span>"<br>
}

<script>
setInterval(displayCounter, 1000);

var i = new Date().getSeconds();
if (i>0){somediv.innerHTML = i-1 ;} else if (i==0){somediv.innerHTML = 100}

function displayCounter() {
    
  document.getElementById("somediv").innerHTML = i;
  i=i 1;
  if (i==100){i=1};
}
</script>