counting down showing one result at a time in a div - javascript

So I have this snippet of code I made that simply counts down from a number X by subtracting 4 until it cant subtract 4 any more and still get a number greater than or equal to 1.
$start = "2647";
for($i = $start; $i >= 1; $i-=4) {
echo $i . ' ';
}
Now, I need help styling it. Right now it just shoots out a string of numbers separated by a space. Pretty boring.
How can I get one number at a time to display in a <div> as it counts down instead of the page of numbers that Ive got now?

Here's an example using javascript.
var counter = document.getElementById("counter"),
value = 2456;
function count(){
counter.textContent = value;
value -= 4;
if (value >= 1) setTimeout(count, 1000);
}
count();
<div id="counter"></div>
It doesn't really make sense to do this live counter via the PHP server.

Related

Is there possible, increment variable without plus sign in javascript?

When I put the javascript code In my WordPress plugin then from the code all + signs are removed by the plugin.
And I see the errors on screen. What do I do?
Actually, I already did this with PHP but I don't know how I have done in javascript.
This is my PHP code.
function increment($i)
{
// Invert bits and
// apply negative sign
$i = -(~$i);
return $i;
}
// Driver code
$n = 3;
echo increment($n);
Actually, I want to try increment without + sign.
First of all, you should really consider understanding how your plugin works because it is a very silly behavior.
Anyway, just for fun, you can use double minus sign to achieve what you want:
let a = 10
let b = a - (-17) // b = 27
You can also create a function:
function add(a, b) {
return a - (-b);
}
for (var i = 0; i < b.length; add(i, 1)) {
...
}

While Loop Logic

I just have a question about some while loop logic.
So, when you write a loop that displays a string of numbers to a document and say that while the loop is <= (less than or equal to) say, 5, and you tell the loop to add 1 each time this is true, wouldn't that mean that: while the loop is equal to 5 that it would add one to 5 too? It doesn't, but I messed up on some code when I was practicing and noticed that when it is equal to five it does not add one, but I thought it would...
console.log('2nd Loop:');
text = '';
// loop:
i = 1;
while (i <= 5) {
text += i + ' ';
i += 1
}
console.log(text); // Should print `1 2 3 4 5 `.
the reason your text doesn't display a 6 isn't because i isn't incremented. It's because the text gets added onto before it's incremented.
In other words when executing on that 5th loop, the text would add on 5, and then it would increment i, and then it would check the loop again, which would no longer be valid and therefore 6 is never printed.
In memory, it adds one. It doesn't add it to the text though.
Since you're incrementing the value after assigning it and then the loop condition fails, it doesn't get to the part where you concatenate the string.
It does. Just output i and you'll see it's 6. text never gets the 6 because of when you increment i.
console.log('2nd Loop:');
text = '';
// loop:
i = 1;
while (i <= 5) {
text += i + ' ';
i += 1
}
console.log(text,i); // Should print `1 2 3 4 5 `.
b/c you +1 after you add i to text, all you need to do is switch the two line order.
EDIT
if you want it start with one just change your i to 0 to start with.
i = 1
console.log('2nd Loop:');
text = '';
i = 0;
while (i <= 5) {
i += 1
text += i + ' ';
}
console.log(text);

Check lines A and count it until it changes to lines B javascript

I am sorry in advance if my title is somehow misleading and I am really sorry for my English if you wouldn't understand me, it's just not my native language!
I will try to explain as better as I can about what I try to achieve. I try to do this for past two entire days and I really need your help!
Let's say I have array with the following numbers:
2 4 6 8 10 1 3 5 2 4
I am trying to count how many even and odd numbers are here in a row, and when even/odd changes - count it again. So my answer from the array above should be:
5 (5 even numbers in a row) 3 (3 odd lines in a row) (2 even lines in a row)
Also when the counting isn't stopped it should post "<br>" instead of counted evens/odds, so it could show me results one time near to each line.
Check this example image:
I have this script which is counting, but it has a few issues: when number is even, it shows counting twice. Next, I can't figure it out how to add <br> to these lines where counting and add result only at the last line of counting. Also my counting result should be at the top, so the script should count from the end as I guess, and when I try i-- it starts the infinite loop...
var digits = ["2, 4, 6, 8, 10, 1, 3, 5, 2, 4"]
var evenCount=1, oddCount=1;
for(var i =0; i < digits.length; i++){
if(digits[i] % 2 ==0){
var oddCount=1;
$("#res").append(evenCount + " (l) <br>");
evenCount++;
}
else
var evenCount=1;
$("#res").append(oddCount + " (n) <br>");
oddCount++;
}
Check my fiddle to see it in action:
https://jsfiddle.net/xk861vf9/8/
First, I think your code show counting twice because you misses two '{' after "for loop" and "else". After I fix the code format, I don't see it counting twice anymore.
$(document).ready(function() {
$("#sub").bind("click", function() {
$("#res").html("");
var digits = $('#content').find("span").map(function() {
return $(this).text();
});
var evenCount = 1;
var oddCount = 1;
for(var i =0; i < digits.length; i++) {
if (digits[i] % 2 ==0) {
oddCount = 1;
$("#res").append(evenCount + " (l) <br>");
evenCount++;
} else {
evenCount=1;
$("#res").append(oddCount + " (n) <br>");
oddCount++;
}
}
});
});
Second, they are many ways to implement that. Take a look at this jsfiddle code as an example.
https://jsfiddle.net/xk861vf9/11/
The concept is to print the counted number after even/odd number changes. Then use for loop to print <br> x times (counted number - 1) so if counted number is 4, there will be 3 <br> tags followed.We also have to check if current number is the last number in array and print the counted number or else the last counted number will be skipped.
Hope this help! :)
Ps. Sorry for my bad English, not my native language too.

99 Bottle song code in pure js

Can some please help me to tell me where i am going wrong in my code. I have been working on it for a little while but i am still stuck please help. this is my code so far. Thanks for the help in advance.
This is my javascript
var bottles;
var beerNum = 99;
// This program will count to 99 for us
// Set up a counter variable, and start it on zero (good place to start)
var counter = 0;
// While loop
while (counter < 99) {
// This line increments (or adds 1) to our counter each time the loop goes around.
counter--;
// This line finds the HTML element with an ID of "output" and puts the value of our counter in it, followed by a line break <br />
// The += operator takes what's already stored and appends our new value to it
document.getElementById('output').innerHTML += counter + "<br />";
}
if (bottles = beerNum){
document.getElementById('output')>innerHTML += bottles + beerNum + "of beer on the wall";
}
And this is my HTML.
<p id="output"></p>
and i have a fiddle to accompany it
http://jsfiddle.net/Matt1990/X4UHD/39/
This might help you out a bit:
for(var i=99; i>0; i--){
document.getElementById("output").innerHTML += i + "Bottles on the wall take one down, pass it around." + "<br>";
}
http://jsfiddle.net/a0knrxzs/
EDIT:
We don't need a while loop, a for loop will just stop when it is no longer greater than 0. While loops are for stopping the loop after a something has been changed.

How to include more than one count up counter on a page

I found a nice simple bit of code to show a count up and I can easily vary the steps each count up makes. So this one counts up in 10's so 10, 20, 30, 40, 50, etc. appears on the page.
Code text is as follows
<script type="text/javascript">
var counter = 0
var timer; { counter = counter + 10;//increment the counter by 10
//display the new value in the div
document.getElementById("timer_container").innerHTML = counter;
}
</script>
</head>
<body onload='timer=setInterval("countUP()", 1000 );'>
<div id="timer_container"<0>/div>
</body>
</html>
What beats me however is how to include the counter multiple times on a single page with each counter using a different counting amount. I'd like to be able to include a lot of counters in a table on a page with each one going up in different amounts 1, 2, 3, 4 etc.
What this is for is to help my teacher wife with times tables on a big whiteboard so there would be 12 different colored areas on display featuring each times table from 1 to 12
Each colored box displayed will include:
image - mysite.com/3timestableicon.png
text - "3x Table"
counter code - going up in increments of 3 and stopping after 20 steps
text- "See - Each step is in 3's!"
I can probably figure out the table and all the different cells to make all this display correctly but I'm stuck getting more than one counter to appear on a single page at the moment so would appreciate any help on this bit.
The problem you have is that var counter = 0 is a global variable. So if you copy n paste the script multiple times, you're sharing the same variable.
I'm not sure how much programming experience you have, but the best way to do this would be to have a counting function. Your code snippet looks like you incorrectly pasted it, but you need to have a function, say count that increments a counter and wraps it when it gets to 12 (or however high you want to go) before looping around. Remove the if statement if you don't want it to loop.
var k = 0;
function count() {
if (k == 12) k = 0;
else k = k + 1;
// update your divs now with the new value of k
}
Then you can execute that with the interval function to count every x number of millis.
<body onload='timer=setInterval("count()", 1000 );'>
Then have an update function which updates the div's with the new values. And this function would apply a multiplier to the current counter (k) value.
function updateDisplay(id, multiplier) {
document.getElementById(id).innerHTML = k * multiplier;
}
Then you can wrap all that together for the times table of 1 to 12 by using this code in the count function to update all the div containers.
for (var n = 1; n <= 12; n++) {
updateDisplay("timer_container_" + n, n);
}
In your HTML you'd just add in 12 divs, each one with the id, "timer_container_1" etc.
I'll leave it as an exercise to the reader to put these functions together and the required divs into a HTML file.

Categories