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 :)
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>
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>
Related
So I was making a simple text animation and decided to make it so once its done, you can restart it. Problem being, im not sure of a way to force it to restart onclick once done. The way im doing it, it can and will restart in the middle if you click the screen, which is fine, but it continues to print some text from before. Anyway heres my code
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id=typing-style></h1>
<script>
var i=0,text="Mitchell";
setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
function rerun() {
document.getElementById("typing-style").innerHTML = " ";
var i=0,text="Mitchell";
setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
}
</script>
<canvas id="screen" onclick="rerun()" width=1000% height=1000%></canvas>
</body>
</html>
So what I've been trying to do is get it to be able to restart when you click the screen, but stop the current process. Hope someone can figure it out.
This code never calls clearInterval, so both timers will run at the same time, cross-talking each other's text manipulations. The code is repeated unnecessarily--it's easier to write it once in a function, then call the function each time you need to run the logic.
For this sort of thing, I'd create a closure that encapsulates the data needed to create a timer: an interval and index. You can return a timer start function that handles resetting timer state and can be invoked in an event listener (preferred to onclick because it keeps behavior out of the markup; read more).
Lastly, prefer textContent or innerText to innerHTML. They're faster, safer and more semantically appropriate if the content is purely text-based.
const makeTextTyper = (el, text, speed) => {
let i;
let interval;
return () => {
clearInterval(interval);
el.innerText = "";
i = 0;
interval = setInterval(() => {
if (i < text.length) {
el.innerText += text[i++];
}
else {
clearInterval(interval);
}
}, speed)
};
};
const buttonEl = document.querySelector("button");
const typerEl = document.querySelector("h3");
const runTyper = makeTextTyper(typerEl, "Mitchell", 300);
buttonEl.addEventListener("click", runTyper);
runTyper();
<button>restart</button>
<h3></h3>
When the rerun function is invoked the existing interval needs to be cancelled, this can be achieved using the clearInterval method.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1 id="typing-style"></h1>
<script>
var i = 0, text = "Mitchell";
var interval;
interval = setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
function rerun() {
clearInterval(interval);
document.getElementById("typing-style").innerHTML = " ";
var i=0,text="Mitchell";
interval = setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
},300)
}
</script>
<canvas height="1000%" id="screen" onclick="rerun()" width="1000%"></canvas>
</body>
</html>
I would write a if statement inside the rerun function to determine whether the animation is done or not. You can determine whether the text is done by using the .length method.
var typingText = document.getElementById("typing-style")
if(typingText.length === 8) //length of Mitchell {
document.getElementById("typing-style").innerHTML = " ";
var i=0,text="Mitchell";
setInterval(()=>{
document.getElementById("typing-style").innerHTML += text.charAt(i);
i++;
}
},300)
} ```
I have a very simple HTML/Javascript as below
But when I run it, the label is only updated once, when it is 99999, which is not my intended behavior. I want the label to update in "real time". Is there any way I can force it to redraw. I have tried to put it into a
notice.style.display = 'none';
notice.innerHTML = i
notice.style.display = 'block';
but it still doesnt work.
Thank you very much.
<html>
<head>
</head>
<body>
<label id = "esperanto-notice"></label>
<script type="text/javascript">
var notice = document.getElementById("esperanto-notice")
for(var i =0; i<100000; i++){
notice.innerHTML = i
console.log(i)
}
console.log("done")
</script>
</body>
</html>
Javascript tries to run all its inline code before updating the DOM, because the latter is slow. Your whole loop runs before the page updates a single time.
We can force the page to update:
for(var i =0; i<100000; i++){
notice.innerHTML = i;
notice.getBoundingClientRect(); // Force DOM update to get latest size
console.log(i);
}
However, while the DOM is updating it still goes straight back to the JS to keep running the loop - this is updating faster than you can see and still appears to hang.
What you need to do is pause the JS execution so that the page has a chance to update.
We can do this with an asynchronous JS function - something that finishes the current JS block but that queues up a callback function to fire later (in this case after the user has seen it):
var notice = document.getElementById("esperanto-notice");
var i = 0;
// Function to write the next value, increment, and queue up the next timeout
var nextFunc = function() {
console.log(i);
notice.innerHTML = i++;
if (i < 100000)
setTimeout(nextFunc, 16); // 16ms is 60FPS
else
console.log('done');
}
// Start it off
nextFunc();
<label id="esperanto-notice"></label>
Now the entire JS runs and nextFunc executes once. It also queues it up to fire again after 16ms, but until then it lets the browser update the page.
Each time nextFunc fires it uses setTimeout to queue up the next execution, then the page has a frame to update (so users see it), then it fires again.
Modern browsers provide a function specifically to wait for the next frame: requestAnimationFrame:
var notice = document.getElementById("esperanto-notice");
var i = 0;
// Function to write the next value, increment, and queue up the next timeout
var nextFunc = function() {
console.log(i);
notice.innerHTML = i++;
if (i < 100000)
// Request the next visible frame to continue
requestAnimationFrame(nextFunc);
else
console.log('done');
}
// Start it off
nextFunc();
<label id="esperanto-notice"></label>
This is the best way unless you need to support old versions of IE (<=9), as requestAnimationFrame can handle any duration of frame (setTimeout can have issues if you have lots of jank).
Finally, this is where the new language keywords async and await can make your code easier. You can keep the loop and abstract the wait for the DOM to update. This next snippet only runs on modern browsers like Chrome and FX (but could use Babel or TypeScript to support IE):
(async function() {
var notice = document.getElementById("esperanto-notice");
for (var i = 0; i < 100000; i++) {
console.log(i);
notice.innerHTML = i;
// Pass back to the DOM until the next frame
await new Promise(r => requestAnimationFrame(r));
}
console.log('done');
})();
<label id="esperanto-notice"></label>
Your loop works very fast and you're not able to see changes in real time. To reach your goal you should to make some timeout before increment counter. For example:
<html>
<head>
</head>
<body>
<label id = "esperanto-notice"></label>
<script type="text/javascript">
var notice = document.getElementById("esperanto-notice")
var i = 0;
var interval = setInterval(function() {
notice.innerHTML = ++i;
if (i === 100000)
clearInterval(interval)
}, 500);
</script>
</body>
</html>
Basically update happened quite fast and you are only seeing the final update on that div,
Try changing the for-loop to following to see the changes
for(var i =0; i<100000; i++)
{
(function(i){ //wrapping the value of i in an IIFE so that it can be locked
setTimeout( function(){
notice.innerHTML = i
console.log(i)
} , i * 100); //i*100 is in milliseconds
})(i);
}
Use javascript setInterval and clearinterval.
<html>
<body>
<label id="esperanto-notice"></label>
<script type="text/javascript">
var notice = document.getElementById("esperanto-notice");
var i = 0;
var interval = setInterval(function () {
notice.innerHTML = i;
i++;
if(i >= 100000) {
clearInterval(interval);
}
}, 100);
</script>
</body>
</html>
Your for loop execute in milliseconds and you only get the last value of your loop. If you want it in real time just use setInterval
var notice = document.getElementById("esperanto-notice")
var i = 0
var refreshIntervalId = setInterval(changeCounter,1000)
function changeCounter(){
i++
notice.innerHTML = i
if(i==10){
clearInterval(refreshIntervalId)
console.log("done")
}
}
<html>
<body>
<label id = "esperanto-notice"></label>
</body>
</html>
Since your code is running very fast actually in "real time" you are not able to see the numbers change on your screen. In order to do that you need the numbers to change slowly enough for you to notice. For that you can setTimeout and delay the update to the DOM.
var notice = document.getElementById("esperanto-notice")
for (var i = 0; i < 100000; i++) {
setTimeout(function(innerI) {
notice.innerHTML = innerI;
console.log(innerI);
}.bind(null, i), i * 100);
}
console.log("done")
<html>
<head>
</head>
<body>
<label id="esperanto-notice"></label>
</body>
</html>
You are given an integer called start_num. Write a code that will countdown from start_num to 1, and when the countdown is finished, will print out "Liftoff!".
I am unsure how to do this and keep getting stuck.
This is the code I am provided with at the beginning of the problem:
function liftoff_countdown(start_num) {
// My code goes here!
}
And then they want me to pass in a value such as the 5:
liftoff_countdown(5);
And then this will be my output:
6
5
4
3
2
1
"Liftoff!"
Thanks!
Look at this maybe help you to create your own code
make two file in a same folder (script.js and index.html)
index.html
<!doctype html>
<head>
<title>Countdown</title>
</head>
<body>
<div id="container">
<div id="inputArea">
</div>
<h1 id="time">0</h1>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
var valueRemaining;
var intervalHandle;
function resetPage() {
document.getElementById("inputArea").style.display = "block";
}
function tick() {
var valueDisplay = document.getElementById("time");
valueDisplay.innerHTML = valueRemaining;
if (valueRemaining === 0) {
valueDisplay.innerHTML = "Liftoff!";
clearInterval(intervalHandle);
resetPage();
}
valueRemaining--;
}
function startCountdown() {
var count = document.getElementById("count").value;
if (isNaN(count)) {
alert("Please enter a number!");
return;
}
valueRemaining = count;
intervalHandle = setInterval(tick, 1000);
document.getElementById("inputArea").style.display = "none";
}
// as soon as the page is loaded...
window.onload = function () {
var inputValue = document.createElement("input");
inputValue.setAttribute("id", "count");
inputValue.setAttribute("type", "text");
// create a button
var startButton = document.createElement("input");
startButton.setAttribute("type", "button");
startButton.setAttribute("value", "Start Countdown");
startButton.onclick = function () {
startCountdown();
};
// add to the DOM, to the div called "inputArea"
document.getElementById("inputArea").appendChild(inputValue);
document.getElementById("inputArea").appendChild(startButton);
};
in this example you have many things to understand how javascript works behind scenes.
How about this...
function liftoff_countdown()
{
var span=document.getElementById('num');
var i=document.getElementById('num').innerText;
i=i-1;
span.innerText=i;
if (i==0){
span.innerText='Liftoff!';
clearInterval(count_down)
}
}
var count_down=setInterval(liftoff_countdown,1000);
<span id="num">5</span>
You can achieve this with a simple recursive function and the use of setTimeout to recursively call the function after a time lapse of 1 second.
function lift_off(seconds) {
if(seconds == 0) {
console.log('liftoff');
} else {
console.log(seconds--);
setTimeout(function(){lift_off(seconds);},1000);
}
}
lift_off(10);
Here is a working JSFiddle
Preface
A lot of these answers seem to be focused on doing things with timers and recursion. I do not believe that is your intent. If your only goal is to print those values to the console, you could simply do the following (see the comments for an explanation).
The Answer
function liftoff_countdown(start_num) {
// Loops through all values between 0 and start_num
for(int i = 0; i < start_num; i++) {
// Prints the appropriate value by subtracting from start_num
console.log( start_num - i );
}
// Upon exiting the loop, prints "Liftoff!"
console.log("Liftoff!");
}
Additional Thoughts
You could just as easily loop backwards through the numbers instead of forward like so:
for(int i = start_num; i > 0; i--){
console.log( i );
}
I tend to lean towards iterating forwards just because it's more common, and it's often easy to confuse readers of your code if they gloss over the loop initialization.
Additionally, I am working with the assumption that when you say "print" you mean "console.log()". If this is untrue, you could of course use any other function in its place (e.g. alert( "Liftoff!" );).
I want to show 3 lines at regular intervals(one second),here's the code:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function showText()
{
var itemlist = document.getElementsByClassName("test");
function additem(index) {
setTimeout(function(){itemlist[index].setAttribute("style", "display:block;");}, 1000);
}
for(var i=0;i<itemlist.length;++i) {
additem(i);
}
}
</script>
</head>
<body>
<input type="button" value="show" onClick="showText()">
<div class="test" style="display:none">first</div>
<div class="test" style="display:none">second</div>
<div class="test" style="display:none">third</div>
</body>
</html>
But the result is: when I click the show button,a second later,
all three div block appear together.I was expecting they will be displayed one by one with an interval of one second.
How can I fix this? Hope for your help.
You're calling all of them at the same time. Using just line1 for clarity.
setTimeout(line1, 1000);
setTimeout(line2, 1000);
setTimeout(line3, 1000);
They don't "stack". All three functions will run in 1 second.
You have two options. Option 1:
setTimeout(line1, (1 + index) * 1000);
setTimeout(line2, (1 + index) * 1000);
setTimeout(line3, (1 + index) * 1000);
This will cause them to timeout one after another.
The other option is making the timeout call the next one:
var index = 0;
function showNextLine() {
// show line index
index++;
if (index < 3) {
setTimeout(showNextLine, 1000);
}
}
setTimeout(showNextLine, 1000);
This way they "chain" like you might be expecting.
There are other variations, and you could even use setInterval() and clearInterval().
Create a global variable
Use setInterval function
increment count every time when setInterval executes
start again from the start if it reaches last (if diff. b/w no. divs and count is less than 1)
fade out all divs except the current one
$(document).ready(function() {
var count = 0;
setInterval(function() {
showIframe(count);
count++;
if (($('.wall-display').length - count) < 1) {
count = 0;
}
}, 1000);
function showIframe(count) {
$('.wall-display').fadeOut('fast');
$('#frame' + count).fadeIn('fast');
}
});
.wall-display:not(:first-child) {
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wall-display" id='frame0'>I'm first text</div>
<div class="wall-display" id='frame1'>I'm second text</div>
<div class="wall-display" id='frame2'>I'm third text</div>
I am new to coding with js, and have tried many different ways to loop this code, as well as asking a friend of mine who is a bit more proficient than I am, and he was incorrect as well. I looked up how to use loops in js as well, and I seem to be stumped, so if you could also give me a basic explanation as to how loops in js work, that'd be great!
ORIGINAL CODE
function partA() {
var classes1 = document.getElementsByClassName('_jvpff _k2yal _csba8 _i46jh _nv5lf'); // finds follow button
var Rate1 = classes1[0];Rate1.click(); // clicks button1
}
setTimeout(partB, 20000); // begins func. B about 17 seconds after func a has been completed
function partB() {
var classes2 = document.getElementsByClassName('_de018 coreSpriteRightPaginationArrow'); // finds “next” arrow
var Rate2 = classes2[0];Rate2.click(); // clicks next arrow
}
partA(); // runs functions
The original code itself works fine, but it never seems to work with any loops I use.
Most Recent Loop Attempt
- Note: failed, obviously
function partA() {
var classes1 = document.getElementsByClassName('_jvpff _k2yal _csba8 _i46jh _nv5lf'); // finds follow button
var Rate1 = classes1[0];Rate1.click(); // clicks button1
}
setTimeout(partB, 20000); // begins func. B about 17 seconds after func a has been completed
function partB() {
var classes2 = document.getElementsByClassName('_de018 coreSpriteRightPaginationArrow'); // finds “next” arrow
var Rate2 = classes2[0];Rate2.click(); // clicks next arrow
}
partA(); // runs functions
for (i = 0; i < 30; i++) {
text += “The number is ” + i + “<br>”;
}
Thank you in advance!
- Michael
Any tips to just generally improve the code would also be appreciated.
Still can't work out exactly what you're after (looks like: trying to automate some repetitive task in some page for which you don't control the source)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<title>JS Loop Example?</title>
<script>
function foo() {
var div = $("#x")[0];
div.innerHTML = "foo was clicked";
for (i = 0; i < 5; i++) {
div.innerHTML += "<br />!";
}
setTimeout(function(){ $('.barButton').click() }, 3000)
}
function bar() {
var div = $("#x")[0];
while (div.firstChild) {
div.removeChild(div.firstChild);
}
var wibble = document.createTextNode('bar was clicked');
div.appendChild(wibble);
for (i = 0; i < 5; i++) {
div.appendChild(document.createElement('br'));
wibble = document.createTextNode('?');
div.appendChild(wibble);
}
setTimeout(function(){ $('.fooButton').click() }, 3000)
}
</script>
</head>
<body onload='setTimeout(foo, 3000)'>
<script>
// Up until the close of the body, I can just write into the document.
document.write('<div id="x" class="stuffGoesHere">');
document.write('some random text<br />');
for (i = 0; i < 5; i++) {
document.write('#<br />');
}
document.write('</div>');
document.write('<input type="button" class="fooButton" value="foo" onClick="foo()" />');
document.write('<input type="button" class="barButton" value="bar" onClick="bar()" />');
</script>
</body>
</html>