当前位置：文江博客话题详情

创建网页以显示间隔的数字

发布于 2025-01-23 16:03:11 字数 190 浏览 0 评论 0原文

有人知道如何制作一个网页显示的数字，例如1至100，当它达到100时，它再次重置为1？ 您可以更改数字和数字之间的时间。

使用 html ， javascript 或任何需要的东西。 thx :)

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离去的眼神 2025-01-30 16:03:11

你的意思是这样吗？

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>

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>

回复收藏 0 原文

牛↙奶布丁 2025-01-30 16:03:11

我不确定我理解你的意思。
如果您只是一个脚本，将数字从1到100次数多次写入，则可以使用：

<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>

在它们之间设置延迟可以添加超时：此处如下：

要更改它将编写1-100的次数更改“ Times”的值，目前将其编写比数字少（因此3次）也可以更改。

编辑：啊哈！好，所以这可以做类似的事情：

<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>

它将从0到100循环，然后从0再次开始。目前相距1秒（1000 miliseconds）。您可以通过将1000更改为其他东西来或多或少（3000是3秒）。

编辑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>

如果您希望它从1个更改开始：
var i = 0;
到
var i = 1;

如果您希望它或多或少，那么100更改：
如果（i == 100）...
例如，到50是：
如果（i == 50）...

并且再也想不起。因为样式可以在#Somediv上使用CSS。

编辑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>

这将从时钟的当前秒开始启动计数器（1-100）。但是，我不确定每个人都一样，浏览器在某些地方或其他因素中是否加载较慢。

编辑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>

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>

回复收藏 0 原文

~没有更多了~